HTML 鼠标点击复制元素内容-蒲公英云

HTML 鼠标点击复制元素内容

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>