Copy Functionality

by Paul Leech

HTML

<input type="button" value="select table"
   onclick="selectElementContents( document.getElementById('tableId') );">
<br><br>
<table id="tableId">
    <thead>
        <tr><th>Heading 1</th><th>Heading 2</th></tr>
    </thead>
    <tbody>
        <tr><td>cell content</td><td>cell content</td></tr>
    </tbody>
</table>
<br>
<br>   

<input type="button" value="Select ContentEdiTable"
   onclick="selectElementContents( document.getElementById('content_builder') );">   

<button onclick="document.getElementById('content_builder').focus();console.log('focus set');document.getElementById('content_builder').select();console.log('content selected');document.execCommand('copy');">Copy</button>
   <br><br>
<div id="content_builder" class="block" style="display: block;" contenteditable="true">
SELECT

    <div id="all_fields" class="inline-block input" contenteditable="true">
      field names
    </div>
    <br>FROM
    <div id="main_table" class="inline-block input" contenteditable="true">
      main_table
    </div><br>
  <div id="add_inner_join1" style="display: block;">
    INNER JOIN
    <div id="join_table01" class="inline-block input" contenteditable="true">
      join table 1
    </div>
    ON <div id="join_table01_on_left" class="inline-block input" contenteditable="true">main_table_ID</div> = 
       <div id="join_table01_on_right" class="inline-block input" contenteditable="true">table_1_ID</div><br>
  </div>
  <div id="add_inner_join2" style="display: block;">
    INNER JOIN
    <div id="join_table02" class="inline-block input" contenteditable="true">
      join table 2
    </div>
    ON <div id="join_table02_on_left" class="inline-block input" contenteditable="true">main_table_ID</div> = 
       <div id="join_table02_on_right" class="inline-block input" contenteditable="true">table_2_ID</div><br>
  </div>
  <div id="add_inner_join3" style="display: block;">
    INNER JOIN
    <div id="join_table03" class="inline-block input" contenteditable="true">
      join...

CSS

* {
  font-family: sans-serif;
}
.inline-block {
  display:inline-block;
}
#content_builder {
  line-height:1.5;
  padding: 0.25rem;
}

JavaScript

function selectElementContents(el) {
    var body = document.body, range, sel;
    if (document.createRange && window.getSelection) {
        range = document.createRange();
        sel = window.getSelection();
        sel.removeAllRanges();
        try {
            range.selectNodeContents(el);
            sel.addRange(range);
        } catch (e) {
            console.error('Mistakes were made...\n'+e);
        }
    } else if (body.createTextRange) {
        range = body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
    document.execCommand('copy');
}