CODEWITHSUNDEEP
javascriptclipboard
Elliot Bonneville
Elliot Bonneville

Reputation: 53291

How to copy text to the clipboard in Javascript?

I'm wondering if there's any way to copy text to the clipboard. I'm well aware of this answer, but it's over three years old now. Has anything changed since then?

Upvotes: 7

Views: 2672

Answers (2)

Vishal
Vishal

Reputation: 288

Try this

function myFunc() {
  /* Get the text field */
  let copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}
input {
  display: inline-block;
  padding: .60rem;
  font-size: 1rem;
  color: #495057;
  background-color: #f1f1f1;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

button {
  display: inline-block;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  user-select: none;
  background-color: #007bff;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  outline: 0;
}
<!-- The text field -->
<input type="text" id="myInput" value="Some Random Text">

<!-- The button used to copy the text -->
<button type="button" onclick="myFunc()">Copy</button>

Upvotes: 0

vcsjones
vcsjones

Reputation: 141588

The easiest thing to do at this point is to go with a Flash based solution. zeroclipboard is a common one (a nice walkthrough is available here).

Browser vendors have over the past few years removed programatic access to the clipboard. Safari / Chrome lost the ability after a change in WebKit, and FireFox for a long time has blocked it. Only IE remains as one that does allow it, however it displays an alert on each page initially.

Upvotes: 3

Related Questions