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

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
– stanze, Commented May 12, 2015 at 9:50
possible duplicate of How do I copy to the clipboard in JavaScript? — vidriduch
– 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
– Joel, Commented May 12, 2015 at 9:53
Hey there. I've included the content of your comment to the question and slightly reformated your question. Try and add relevant information directly into your question instead of in a comment. Good luck! — Félix Adriyel Gagnon-Grenier
– Félix Adriyel Gagnon-Grenier, Commented May 14, 2015 at 22:03

Joel · Accepted Answer · 2020-10-21 07:31:19Z

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

For more information on this API, read the article with examples for all operations.

Community · Accepted Answer · 2017-05-23 12:30:04Z

-1

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

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered May 12, 2015 at 9:52

user2042292

Collectives™ on Stack Overflow

Copy To Clipboard Javascript

2 Answers 2

Answer from the future (2020):

Methods:

read()

readText()

write()

writeText()

Interfaces:

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Answer from the future (2020):

Methods:

read()

readText()

write()

writeText()

Interfaces:

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related