Copy and paste text from JavaScript

Question

I'm trying to figure out, how to copy string and paste from JavaScript.

This code example:

function copyLink() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
}

Copies from myInput value:

  <input type="text" value="ttps://site.org/" id="myInput">

but I'm trying copy text from variable, not included to html value:

 <button onclick="copyText()">Copy text</button>

which is in .js to allow user copy/paste:

function copyText() {
   var text = "long text...";
   ...
}

It looks simple, but seems like I'm searching incorrectly, because I can't find the method.

var copyText = document.getElementById("myInput").value might do the trick — user3791775
– user3791775, Commented Sep 1, 2020 at 21:32
@user3791775 Hello, you mean adding to myInput, can you provide some example — lf80
– lf80, Commented Sep 1, 2020 at 21:51
document.getElementById("myInput") returns the html, document.getElementById("myInput");.value returns the value of the input. I'm not sure the rest of your code works (the select and setSelectionRange part) — user3791775
– user3791775, Commented Sep 1, 2020 at 21:54

iguypouf · Accepted Answer · 2020-09-01 21:34:53Z

1

The best way is to create a Dummy element, copy the content and remove it from the dom.

// Create a dummy input
var dummy = document.createElement("input");

// Inject the content
dummy.value=copyText;

// Add it to the dom
document.body.appendChild(dummy);

// Select it
dummy.select();

// Copy the content
document.execCommand("copy");

// Clean the dom
document.body.removeChild(dummy);

answered Sep 1, 2020 at 21:34

iguypouf

7704 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kshetline · Accepted Answer · 2020-09-01 22:15:52Z

1

As a quick fix, you could just stick the value you want to copy into an input field (even a hidden one), and copy the same way.

Here's a Codepen example: https://codepen.io/kshetline/pen/ExKwjjq?editors=1111

function copyText() {
  document.getElementById('hidden').value = new Date().toLocaleString();
  var copyText = document.getElementById('hidden');
  copyText.select();
  document.execCommand('copy');  
}

<input id="hidden" type="text" style="opacity: 0; position: absolute; top: -5em">
<button type="button" onclick="copyText()">Copy</button><br>
<label for="paste">Paste here: <input id="paste" type="text"></label>

There's a more advanced API for clipboard operations, however, that's described in this article: https://web.dev/async-clipboard/

edited Sep 1, 2020 at 22:15

answered Sep 1, 2020 at 21:30

kshetline

14k6 gold badges49 silver badges96 bronze badges

2 Comments

lf80 Over a year ago

Hello, if I get you correct, I have to hide myInput document.getElementById("myInput").style.display = "none"; but this way it does not make copy

kshetline Over a year ago

I'd hide it using an opacity of 0 instead.

DenverCoder9 · Accepted Answer · 2020-12-16 13:42:35Z

0

You can use the Async Clipboard API:

async function copy() {
  try {
    await navigator.clipboard.writeText(input.value);
    console.log('Value copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

For more details, please see this article.

answered Dec 16, 2020 at 13:42

DenverCoder9

2,74517 silver badges40 bronze badges

Collectives™ on Stack Overflow

Copy and paste text from JavaScript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related