html+js实现点击按钮复制文本内容到剪切板上
1,首先把要复制的内容隐藏放在input输入框内,(1) 将值放在文本框中(value);(2) 将文本框隐藏(opacity);
<input id="rsg-link" value="{!! $rsg_link !!}" style="opacity: 0" readonly>
注意:1)隐藏的时候如果使用display:none或者type=hidden都不可以,获取不到value。
2)点击复制之后,复制成功后会调用起键盘,因此需要在input中加上readonly!
2,然后用js实现复制功能:
//实现复制功能
$(".rsg-copy").click(function() {
var e = document.getElementById("rsg-link");
e.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
})
说明:首先获取input框对象,然后通过select()选择对象,会选中用户输入的值,即input中的value。
然后通过document.execCommand(“Copy”);执行复制命令,此时可以复制到所对应的值。