Copy To Clipboard Javascript

Question

See answer below.

Also see: How do I copy to the clipboard in JavaScript? for an older approach.

---

Original question:

I want to be able to copy a table-cells value whenever a user clicks.
I've tried this:

function copyToClipboard(text) {
    var selectTableCells = document.querySelector('td');

    selectTableCells.addEventListener('click', function(event) {
        console.log("You copied: ", selectTableCells);
        copyToClipboard(selectTableCells.innerHTML);
    });
}

td,
th {
  border: 1px solid #ccc;
  display: block;
  background-color: #ccc;
  width: 160px;
}
td {
  cursor: pointer;
  text-align: center;
}

<table id="table" class="responsive" style="width:1000px;">
  <tbody>
    <thead>
      <tr>
        <th>Field Type</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="cell1">Click me to copy!</td>
      </tr>
    </tbody>
</table>
</div>
<input type="text" style="height:50px;width:300px;" placeholder="For proof of concept. Try to paste here">

Answer 1

Answer from the future (2020):

---

There is now a Clipboard API

This snippet fetches the text from the clipboard and appends it to the first element found with the class editor. Since readText() (and read(), for that matter) returns an empty string if the clipboard isn't text, this code is safe.

navigator.clipboard.readText().then(
    clipText => document.querySelector(".editor").innerText += clipText);

Methods:

Note: All methods return a promise

read()

var getClipboardData = navigator.clipboard.read();

The read() method of the Clipboard interface requests a copy of the clipboard's contents, returns a Promise. Unlike readText(), the read() method can return arbitrary data, such as images. This method can also return text.

readText()

var getClipboardText = navigator.clipboard.readText();

Returns an empty string if the clipboard is empty, does not contain text, or does not include a textual representation among the DataTransfer objects representing the clipboard's contents.

write()

var setClipboardData = navigator.clipboard.write(data);

The promise is rejected if the clipboard is unable to complete the clipboard access.

writeText()

var setClipboardText = navigator.clipboard.writeText(newClipText); 

The promise is rejected if the caller does not have permission to write to the clipboard.

---

Interfaces:

Clipboard Secure context

Provides an interface for reading and writing text and data to or from the system clipboard. The specification refers to this as the 'Async Clipboard API.'

ClipboardEvent Secure context

Represents events providing information related to modification of the clipboard, that is cut, copy, and paste events. The specification refers to this as the 'Clipboard Event API'.

ClipboardItem Secure context

Represents a single item format, used when reading or writing data.

---

For more info, see Clipboard API

Answer 2

try this attribute contenteditable="true" and try following this link to copy your clipboard contents, execute ctrl + c