html+js剪切板问题

lizf2019 发表于 2022-7-15 17:04

本帖最后由 lizf2019 于 2022-7-15 17:06 编辑

https://s1.ax1x.com/2022/07/15/jhvy0x.png
如图，在如图的网页中，实现单击“复制”执行复制动作的js脚本有以下问题:
1.是否给“复制”文字加<a>标签中的onclick事件执行函数即可
2.求js操作剪切板的函数
3.表格之后会动态生成，核心代码如下：
如何在动态生成的情况下(php输出html)，实现点击"复制"即可复制当前行的链接呢？
<table>
<tr>
   
   <th>序号</th>
   <th>名称</th>
   <th>链接地址</th>
   <th>添加时间</th>
   <th>备注</th>
   <th>复制链接</th>
</tr>
<tr>
   <td>1</td>
   <td>哈哈</td>
   <td><a href="#">http://p.com</a></td>
   <td>22-7-14 23:56</td>
   <td>一般来说，可是，即使是这样，如何谈恋爱的出现仍然代表了一定的意义。我们都知道，只要有意义，那么就必须慎重考虑。要想清楚，如何谈恋爱，到底是一种怎么样的存在。我认为，本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。如何谈恋爱的发生，到底需要如何做到，不如何谈恋爱的发生，又会如何产生。一般来讲，我们都必须务必慎重的考虑考虑。俾斯麦说过一句富有哲理的话，对于不屈不挠的人来说，没有失败这回事。这句话语虽然很短，但令我浮想联翩。黑塞说过一句富有哲理的话，有勇气承担命运这才是英雄好汉。这句话语虽然很短，但令我浮想联翩。本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。就我个人来说，如何谈恋爱对我的意义，不能不说非常重大。</td>
   <td>
         <a href="#">复制</a>
   </td>
</tr>

</table>

qeq66 发表于 2022-7-15 17:17

1.先引入clipboard.js
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

2.设置复制剪贴的内容
从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">


<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

qeq66 发表于 2022-7-15 17:20

Mr.[先知] 发表于 2022-7-15 17:48

用jq 就很好做
原生比较麻烦

原理就是给复制写一个onclick="copy(this)"
function copy(ev) {
取ev的父节点的父节点tr 遍历它的td的下标2 取innerHtml

}

yuupuu 发表于 2022-7-15 18:09

原生JS设置剪贴板
---

<style type="text/css">
#neirong{
width: 300px;
height: 60px;
background: #eee;
}
</style>

<div id="neirong">这是内容这是内容这是内容这是内容</div>
<button id="copy">复制</button>

<script>
function copyArticle(event){
   const range = document.createRange();
   range.selectNode(document.getElementById('neirong'));
   const selection = window.getSelection();
   if(selection.rangeCount > 0) selection.removeAllRanges();
   selection.addRange(range);
   document.execCommand('copy');
   alert("复制成功");
}

window.onload = function () {
var obt = document.getElementById("copy");
obt.addEventListener('click', copyArticle, false);
}
</script>

平淡最真 发表于 2022-7-15 18:28

const copyToClipboard=(text)=>navigator.clipboard?.writeText&&navigator.clipboard.writeText(text);
copyToClipboard(“听说这样就可以复制到剪切板”)

formli 发表于 2022-7-15 19:13

看了一下全是大佬啊！

页: [1]

吾爱破解 - 52pojie.cn's Archiver

html+js剪切板问题