HTML 完整实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 双击或单击选择复制标签内容 - 何星星</title>
<script src="sweetalert.min.js"></script>
<script>
copyInnerTextOfCell = (event) => {
let innerText = event.target.innerText;
var myTagContent = document.createElement("input");
document.body.appendChild(myTagContent);
myTagContent.value = innerText;
myTagContent.select();
document.execCommand("copy");
myTagContent.remove();
swal("复制成功！" + innerText, {button: false,});
}
</script>
</head>
<body>
<p onDblClick="copyInnerTextOfCell(event)"> 已成功复制 p 标签内容 </p>
<div onDblClick="copyInnerTextOfCell(event)"> 已成功复制 div 标签内容 </div>
<span onDblClick="copyInnerTextOfCell(event)"> 已成功复制 span 标签内容 </span>
</body>
</html>功能说明
<script src="sweetalert.min.js"></script> ：swal 弹窗提示的库；
swal("复制成功！" + innerText, {button: false,}); ：swal 提示操作状态弹窗信息
copyInnerTextOfCell：目标功能函数
onDblClick：触发双击响应目标事件
execCommand(“copy”); 或 execCommand(“cut”);：核心代码，将目标文本复制或剪切到系统剪贴板
更多理解
触发事件动作：onClick：单击触发事件；onDblClick：双击触发事件；onContextMenu：右键触发事件；
更多触发点动作：https://www.w3school.com.cn/tags/html_ref_eventattributes.asp
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
0 条评论