HTML 鼠标点击复制元素内容

最新推荐文章于 2022-12-07 15:09:53 发布

锦天

最新推荐文章于 2022-12-07 15:09:53 发布

阅读量4.6k

点赞数 4

分类专栏： JS

本文链接：https://blog.csdn.net/wuyujin1997/article/details/111658453

版权

document.execCommand 剪贴板API 复制功能兼容性替代方案

关键词由CSDN通过智能技术生成

JS 同时被 2 个专栏收录

107 篇文章 4 订阅

订阅专栏

前端框架

78 篇文章 3 订阅

订阅专栏

Intro

效果展示

在这里插入图片描述

方法封装

copyInnerTextOfCell = (event) => {
  let innerText = event.target.innerText;
  var tmpInput = document.createElement("input");
  document.body.appendChild(tmpInput);
  tmpInput.value = innerText;
  tmpInput.select();
  document.execCommand("cut"); // copy
  tmpInput.remove();
  alert("复制成功！" + innerText);
}

原理、兼容性、替代方案
官网文档：< https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand>
- 实现原理：使用了DOM原生的API document.execCommand(commandStr)
  当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。
- 兼容性：已废弃。
- 替代方案/趋势：将来会被 Clipboard替代(需要用户授权后才能运行相关API)。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>wuyujin1997</title>
  <script>
  copyInnerTextOfCell = (event) => {
    let innerText = event.target.innerText;
    var tmpInput = document.createElement("input");
    document.body.appendChild(tmpInput);
    tmpInput.value = innerText;
    tmpInput.select();
    document.execCommand("cut"); // copy
    tmpInput.remove();
    alert("复制成功！" + innerText);
  }
  </script>
</head>
<body>
  
  <p onclick="copyInnerTextOfCell(event)">这是 p 标签内容</p>
  <div onclick="copyInnerTextOfCell(event)">这是 div 标签内容</div>
  <span onclick="copyInnerTextOfCell(event)">这是 span 标签内容</span>
  
</body>
</html>