Question

我正在使用w3schools的脚本将其单击时将文本复制到剪贴板，但是该脚本仅在存在文本字段时才起作用。我试图只显示一个没有文本字段的图标，所以当用户单击该图标时，编码后的文本会自动复制到剪贴板。

他们的脚本位于这里：https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

我正在使用display：none;隐藏输入字段。尽管就JS而言，一切似乎都能正常工作，但它只是不会复制文本。

有没有办法（也许通过其他方法或脚本）让我只显示用于复制文本的图标，而不是显示字段+图标/链接？

Answer 1

这里：

            var copyTextareaBtn = document.querySelector('.btn4');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.block2');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

Answer 2

好吧，我不知道我是否理解您的问题，但是我假设您想复制一些文本而不在html页面中显示该文本，使用该脚本，您只要从按钮的文本输入ID中获取元素被按下。如果您将其隐藏，则无法访问。如果您只想在每次按底部时复制一些隐藏的文本，则应将文本放在javascript文件中，而不要放在htlm页面中：）

希望我的回答对您有所帮助！

Answer 3

有一种方法可以复制隐藏的输入，但是不使用display:none，您可以使用类似position:absolute;left:-1000px的方式将输入发送到看不见的位置，例如：

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}

#myInput{position:absolute;left:-1000px}

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>

Answer 4

function copyToClipboard(text){
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

通过图标复制到剪贴板

4 个答案: