需求是这样的:在一个列表中需要添加一个复制按钮,用来复制列表中的的一些指定内容
思路:
1.获取到指定内容
2.对指定内容进行复制操作
获取指定内容;可以通过页面选择器直接获取,(但是通过这个方法获取到的内容会出现重复)我用的是$("").text() || $("").html() 这样操作都会导致获取内容重复,后来我选择在ajax请求里面获取内容,并赋值给其他元素,
var info = datas.bankName + " " + bankNum + " " + bankUser;
在html中需要定义一个input框这样你的内容才会被复制到剪贴板,但是定义的这个input框不能使用type=hidden,这样会导致复制失效,效果出不来,在这里我是用了透明度,代码如下
<input type="text" value="" style="opacity: 0; position: absolute;" id="info">
接下来就是给input框里塞值了,一开始我使用的是$("#info").text(),后来发现这样的的赋值会导致后面的js获取不到input这个对象,最后我使用了attr();
$("#info").attr("value", info);
最后就是复制的过程了,话不多说直接上代码
function copy() {
var e = $("#info");
e.select();
document.execCommand("copy");
}