my copy to clipboard code in JavaScript doesn't work

Question

as you would have guessed from my question and as you will interpret by looking at my code , im a beginner. this is the first real application i tried to write in javascript and i would love to understand why it doesn't work?

var button = document.getElementById("button");
var text = document.getElementById("text");
function button() {
 text.select();
 text.setSelectionRange(0, 99999); 
navigator.clipboard.writeText(text.value);
alert("you copied this text");
}

button is a onclick event in html and text is an input in html. thank you very much

There is some documentation for the new clipboard API. But note: "The navigator.clipboard API is a recent addition to the specification and may not be fully implemented in all browsers. This article describes some limitations, but be sure to review the compatibility tables for each method before using them to ensure that the API supports your needs." — Andy
– Andy, Commented Nov 11, 2021 at 19:39
Is the function button actually called? Also, writeText returns a Promise, so the alert call does not actually tell you if the clipboard was written to. What browser are you using, and version? The Clipboard API is still pretty new. — Oliver
– Oliver, Commented Nov 11, 2021 at 19:40

Abelucho · Accepted Answer · 2021-11-11 20:24:38Z

As mentioned, the writeText is a promise, but also the Clipboard API needs permision. Check this if the permission is granted or not

function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myText");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value).then(function() {
    alert("Copied to clipboard successfully!");
  }, function(error) {
    alert("ERROR:\n"+error);
  });;
}

async function CheckPermission(){
  const readPerm = await navigator.permissions.query({name: 'clipboard-read', allowWithoutGesture: false });
  
  const writePerm = await navigator.permissions.query({name: 'clipboard-write', allowWithoutGesture: false });
  
  // Will be 'granted', 'denied' or 'prompt':
  alert('Read: '+readPerm.state+'\nWrite: '+writePerm.state);
}

<input type="text" value="ASDF" id="myText">
<button onclick="myFunction()">Copy text</button><br><br>
<button onclick="CheckPermission()">Check Permission</button>

If so, need to ask permission. More info here.

user17389280 · Accepted Answer · 2021-11-11 21:57:31Z

1

i don't know if i should write this as an answer or what. but anyways i rewrote the code and it ended up like this :

var text = document.getElementById("text");
var button = document.getElementById("button");

function buttonholder() {
text.select();
text.setSelectionRange(0, 99999)
navigator.clipboard.writeText(text.value);
}
button.addEventListener("click",buttonholder);

thank you everyone that replied. its working fine. i don't know why the first code didn't work but well the second code is much better than the last one again thanks for helping. some of your references made me think of addEventListener.

edited Nov 11, 2021 at 21:57

answered Nov 11, 2021 at 21:39

user17389280

431 silver badge5 bronze badges

Collectives™ on Stack Overflow

my copy to clipboard code in JavaScript doesn't work

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related