通过图标复制到剪贴板

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类的东西将输入发送到视野之外的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);
}