原生js实现复制功能

最新推荐文章于 2024-04-12 18:31:57 发布

前端J先生

最新推荐文章于 2024-04-12 18:31:57 发布

阅读量421

点赞数 10

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_37547964/article/details/136596876

版权

在JavaScript中，实现复制功能主要依赖于document.execCommand('copy')方法，这个方法可以复制文本到用户的剪贴板。但是请注意，这个方法可能在某些环境下（如某些浏览器或浏览器设置中）不可用。

以下是一个简单的示例，该示例创建了一个按钮，当点击该按钮时，它会将一段文本复制到剪贴板：

<!DOCTYPE html>
<html>
<body>

<p id="myP">Hello World!</p>

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

<script>
function myFunction() {
  /* 获取要复制的文本 */
  var copyText = document.getElementById("myP");

  /* 创建一个新的textarea元素，设置其值为要复制的文本 */
  var textArea = document.createElement("textarea");
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;
  textArea.style.width = '2em';
  textArea.style.height = '2em';
  textArea.style.padding = 0;
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';
  textArea.style.background = 'transparent';
  textArea.value = copyText.textContent;

  /* 将新的textarea元素添加到文档中 */
  document.body.appendChild(textArea);

  /* 选中textarea中的文本 */
  textArea.select();

  /* 复制选中的文本到剪贴板 */
  document.execCommand('copy');

  /* 移除新添加的textarea元素 */
  document.body.removeChild(textArea);
}
</script>

</body>
</html>

在这个示例中，我们首先通过document.getElementById获取了要复制的文本。然后，我们创建了一个新的textarea元素，并设置其值为要复制的文本。接着，我们将这个textarea元素添加到文档中，并选中其中的文本。最后，我们使用document.execCommand('copy')将选中的文本复制到剪贴板，然后移除新添加的textarea元素。

然而，需要注意的是，document.execCommand是一个较老的方法，且在一些现代浏览器中可能已被弃用或不再支持。对于需要更广泛浏览器支持的应用，可能需要使用Clipboard API，但这也可能需要在用户交互（如点击事件）的上下文中使用，并且可能需要处理一些安全性和隐私性问题。

前端J先生

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js实现复制功能

对于需要更广泛浏览器支持的应用，可能需要使用Clipboard API，但这也可能需要在用户交互（如点击事件）的上下文中使用，并且可能需要处理一些安全性和隐私性问题。/* 创建一个新的textarea元素，设置其值为要复制的文本 *//* 将新的textarea元素添加到文档中 */元素添加到文档中，并选中其中的文本。/* 移除新添加的textarea元素 */将选中的文本复制到剪贴板，然后移除新添加的。/* 选中textarea中的文本 *//* 复制选中的文本到剪贴板 *//* 获取要复制的文本 */
复制链接

扫一扫