时间戳

首页 > 解决方案 > 通过图标复制到剪贴板

javascript - 通过图标复制到剪贴板

问题描述

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

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

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

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

标签： javascripthtmlcopyiconsclipboard

解决方案

有一种方法可以复制隐藏的输入，但不使用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>

推荐阅读