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

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。