全面的前端编程教程 - 秘密武器开发者中心

热搜:m1 代理 前端 301

js全选复制到剪贴板

2023-12-21 09:30:02

在JavaScript中,您有多种方式来将文本复制到剪贴板。以下是一个可行的例子,此例子使用了`document.execCommand("copy")`方法:

<input type="text" value="要复制的文本" id="myInput">

<!-- 创建一个按钮,点击时触发复制操作 -->
<button onclick="myFunction()">复制</button>

<script>
function myFunction() {
  /* 获取输入文本 */
  var copyText = document.getElementById("myInput");

  /* 选择文本 */
  copyText.select();
  copyText.setSelectionRange(0, 99999); // 适用于手机设备

  /* 复制文本至剪贴板 */
  document.execCommand("copy");

  alert("已复制文本: " + copyText.value);
}
</script>

然而,这种方式在最近的Firefox和Chrome版本中不再建议使用。它们建议使用`navigator.clipboard.writeText`进行复制。

这是一个异步方法,因此需要在一个`async`函数内使用:

<input type="text" value="要复制的文本" id="myInput">

<button onclick="myFunction()">复制</button>

<script>
async function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();

  try {
    await navigator.clipboard.writeText(copyText.value);
    alert('已复制文本: ' + copyText.value);
  } catch (err) {
    console.error('Error occurred while copying text: ', err);
  }
}
</script>

注意,`navigator.clipboard.writeText` 需要在用户触发的事件(如点击事件)中使用,同时确保网站在HTTPS下运行或者在localhost上进行开发

否则它可能不会工作。

那么问题来了,在http下怎么写?

在HTTP网站下,新的剪贴板API `navigator.clipboard.writeText` 可能无法正常工作,因为这个API需要在安全的上下文下运行,通常是HTTPS网站。如果你的站点无法支持HTTPS,你或许需要使用旧的 `document.execCommand("copy")` 方法来实现复制到剪贴板。


以下是用 `document.execCommand("copy")` 实现复制的示例代码:

function copyToClipboard(text) {
  var input = document.createElement('textarea');
  document.body.appendChild(input);
  input.value = text;
  input.focus();
  input.select();
  var result = document.execCommand('copy');
  document.body.removeChild(input);
  return result;
}

在这个函数中:


1. 首先,新创建一个textarea元素,然后将其添加到文档

2. 然后,将需要复制的文本设置为textarea的值

3. 通过调用 focus 和 select 方法,我们选中textarea中的文本

4. 最后,使用 `document.execCommand('copy')` 命令复制文本

5. 完成后,textarea元素从文档中移除


另外提醒一下,`document.execCommand`已经被标记为不推荐使用,可能会在未来的浏览器版本中被废弃,因此在可以使用HTTPS的情况下,最好使用新的剪贴板API `navigator.clipboard.writeText`。


js