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>
<a onDblClick="copyInnerTextOfCell(event)"> 已成功复制 a 标签内容 </a>
<p onDblClick="copyInnerTextOfCell(event)"> 已成功复制 p 标签内容 </p>
<div onDblClick="copyInnerTextOfCell(event)"> 已成功复制 div 标签内容 </div>
<span onDblClick="copyInnerTextOfCell(event)"> 已成功复制 span 标签内容 </span>
</body>
</html>以上 a 标签的形式可能需要增加 href="javascript:void(0)" 以阻止 a 标签原有功能的触发。
功能说明
<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 条评论