通过图标复制到剪贴板

Question

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

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

我正在使用 display:none；隐藏输入字段。尽管就 JS 而言一切似乎都有效，但它只是不复制文本。

有没有办法，也许是通过另一种方法或脚本，让我只显示一个用于复制文本的图标而不是一个字段 + icon/link?

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 文件中，而不是放入 html 页面中:)

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

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);
}

通过图标复制到剪贴板

Copy to clipboard via icon

html

javascript

clipboard

icons

copy