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">

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">

• javascript
• html-table

Share Improve this question Follow edited Oct 20, 2020 at 10:23 Joel asked May 12, 2015 at 9:43 JoelJoel 6,22166 gold badges4242 silver badges6868 bronze badges 5

• Any thing you have tried. – stanze Commented May 12, 2015 at 9:45
• In your question you mentioned that you have tried with different stuffs, I'm just asking you to update your respective stuff which you have tried. – stanze Commented May 12, 2015 at 9:50
• 2 possible duplicate of How do I copy to the clipboard in JavaScript? – vidriduch Commented May 12, 2015 at 9:53
• oh. ok. link But, it's not what i want. i just want the user to press the cell (the value) and it will be copied. – Joel Commented May 12, 2015 at 9:53
• Hey there. I've included the content of your ment to the question and slightly reformated your question. Try and add relevant information directly into your question instead of in a ment. Good luck! – Félix Adriyel Gagnon-Grenier Commented May 14, 2015 at 22:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 plete 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

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