之前遇到这种需求都是选择用插件,但是有的插件只对input,textarea等元素管用,比如clipboard.js,可以满足需求,需要的可以去看看。
clipboard.js: https://clipboardjs.com/
这次主要说js对一些不是input,textarea的元素进行内容复制,其实原理很简单,就是用js创建一个input,然后把内容赋值给input,然后通过input.select()
进行选中,再通过浏览器自带的document.execCommand('copy')
进行复制。看代码
copydizhi(index){
var text =document.getElementById(index).innerText; //获取span元素的值
var input = document.createElement('input'); //创建一个input
input.setAttribute('id', 'copyInput'+index); //input赋id
input.setAttribute('value', text); //将值赋给input
document.getElementsByTagName('body')[0].appendChild(input); //在body中加入input
document.getElementById('copyInput'+index).select(); //选中input
if (document.execCommand('copy')) { //复制
alert('复制成功');
}
document.getElementById('copyInput'+index).remove(); //移除input
},