功能说明:点击“复制”按钮,获取当前点击事件的父级元素(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('已复制到剪贴板');
}
}
});
});