JS实现点击内容后将内容复制到粘贴板

LordForce

已于 2022-12-09 11:12:57 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端开发语言

于 2022-08-03 16:45:12 首次发布

本文链接：https://blog.youkuaiyun.com/LordForce/article/details/126143638

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何通过JavaScript实现网页文本的一键复制功能，提升用户体验。通过监听点击事件，创建临时input元素并填充内容，再执行复制命令，最后移除input元素，使得用户只需单击即可将文字复制到剪贴板。这个方法适用于需要快速复制复杂文本的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当一段很长，并且包含各种标点符号的文字，要去复制时，就不能双击复制，必须要手动去选择文字，然后才能去复制，非常麻烦。

因此，我们常常看到，有些比较人性化的网站，通常会有对需要复制的文字进行单击、双击即可复制的暖心操作。

如下，是一个input框的单击鼠标左键即可将内容复制到粘贴板的方法供大家参考，有更好的建议欢迎大家留言评论。

实操代码：

<script type="text/javascript">
  /**
  * 监听点击事件
  */
  $(document).on("click", "#randomPW", function() {
    copyForPaste($(this).val());
  });
  /**
  * 实现点击内容后将内容复制到粘贴板方法
  */
  function copyForPaste($val) {
    var input = document.createElement('input'); // 创建input元素
    // 把文字放进input中，供复制
    input.value = $val;
    document.body.appendChild(input); // 向页面底部追加输入框
    // 选中创建的input
    input.select();
    var copy_result = document.execCommand('copy'); // 执行复制命令
    if (copy_result) {
      alert('已复制到粘贴板');
    } else {
      alert('复制失败');
    }
    document.body.removeChild(input); //删除动态创建的节点
  }
</script>