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 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用 * 标注