当前位置：首页 > news >正文

【前端】jq复制文本到剪贴板

news 来源：原创 2024/9/20 13:32:02

功能说明：点击“复制”按钮，获取当前点击事件的父级元素（id="block"）下子元素（id="textToCopy"）下的文本

HTML代码

<div class="chats">  <div class="block">  <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="width: 90%; margin: 0.2rem auto; box-sizing:border-box; display:flex;flex-direction:row;">  <!-- 省略部分代码 -->  <div id="textToCopy" style="flex: 0.9; line-height: 0.45rem; margin: 0 0.1rem; background: #F5F5F5; padding: 0.1rem; border-radius:5px">  <p>Hello! It seems like you've entered a string of "nnnn." If you have any questions or need assistance</p>  </div>  </div>  <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">  <a href="javascript:void(0)" class="copy-link">复制</a>  </div>  </div>  <div class="block">  <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="width: 90%; margin: 0.2rem auto; box-sizing:border-box; display:flex;flex-direction:row;">  <!-- 省略部分代码 -->  <div id="textToCopy" style="flex: 0.9; line-height: 0.45rem; margin: 0 0.1rem; background: #F5F5F5; padding: 0.1rem; border-radius:5px">  <p>Hello!  please feel free to ask, and I'll be happy to help.</p>  </div>  </div>  <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">  <a href="javascript:void(0)" class="copy-link">复制</a>  </div>  </div>  </div>

Js代码

    document.addEventListener('DOMContentLoaded', function() {  // 为所有 .block 的父元素添加点击事件监听，使用事件委托处理 .copy-link 的点击  document.querySelector('.chats').addEventListener('click', function(e) {  // 检查点击的元素是否是我们想要的 .copy-link  if (e.target.matches('.copy-link')) {  // 找到点击的 .copy-link 所在的 .block  var block = e.target.closest('.block');  // 在 .block 中找到 #textToCopy（注意：ID应唯一，这里仅为示例）  var textToCopy = block.querySelector('#textToCopy p');  // 获取文本内容  var text = textToCopy.textContent || textToCopy.innerText;  // console.log(text)// 使用navigator.clipboard API进行复制（现代浏览器）  if (navigator.clipboard) {  navigator.clipboard.writeText(text).then(function() {  console.log('复制成功');  }, function(err) {  console.error('复制失败:', err);  });  } else {  // 对于不支持Clipboard API的浏览器，可以使用旧方法（例如创建一个临时的textarea）  var textarea = document.createElement('textarea');  textarea.value = text;  document.body.appendChild(textarea);  textarea.select();  document.execCommand('copy');  document.body.removeChild(textarea);  console.log('已复制到剪贴板');  } }  });  });