1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信html5复制剪切板 微信h5实现复制内容到剪贴板 两种方法

微信html5复制剪切板 微信h5实现复制内容到剪贴板 两种方法

时间:2020-02-27 06:51:51

相关推荐

微信html5复制剪切板 微信h5实现复制内容到剪贴板 两种方法

先介绍第一种,这种方法对ios有一些不兼容,不过也看运气

先写HTML内容

微信:22

复制

JS代码

首先引入jq

$(".copy")[0].onclick = function(){

var txt = $('#wxContent').text();

Copy(txt);

}

// 复制微信号函数

function Copy(str) {

var save = function(e) {

e.clipboardData.setData('text/plain', str);

e.preventDefault();

};

document.addEventListener('copy', save);

document.execCommand('copy');

document.removeEventListener('copy', save);

console.log('复制成功');

}

第二种方法,比第一种兼容性好,但是需要添加一下样式

这是封装了一个方法

function copy(message) {

var input = document.createElement("input");

input.value = message;

document.body.appendChild(input);

input.setAttribute("readonly","readonly");

input.select();

input.setSelectionRange(0, input.value.length), document.execCommand('Copy');

layer.open({ //移动端引入的一个插件,可以自己百度一下怎么用

content: '复制成功',

skin: 'msg',

time: 2

});

}

然后我们需要复制什么内容

相当于调用这个方法,然后给message赋值

然后这有个不好的表现,因为它是生成一个input嘛,肯定复制的时候会有焦点触发和生成一个input

焦点触发这个我封装的代码已经解决了,生成一个input框,你不想看见直接给它隐藏就好了,这就css样式了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。