项目中需要实现复制功能,怎么实现呢?前期使用input标签的属性跟方法来实现,后期通过navigator.clipboard.writeText,一行代码实现六行代码的功能,进步了。
原代码:
document.querySelector('.btn-copy').addEventListener('click', function(event) {
let copy_text = document.querySelector(".draw-geojson-data").innerHTML;//拿到想要复制的值
let input_dom = document.createElement('input');//创建input元素
input_dom.value = copy_text;//添加需要复制的内容到value属性
document.body.appendChild(input_dom);//向页面底部追加输入框
input_dom.select();//选择input元素
document.execCommand("Copy");//执行复制命令
alert("复制成功!");//弹出提示信息,不同组件可能存在写法不同
//复制之后再删除元素,否则无法成功赋值
input_dom.remove();//删除动态创建的节点
});
优化后的代码:
document.querySelector('.btn-copy').addEventListener('click', function(event) {
let copy_text = document.querySelector(".draw-geojson-data").innerHTML; //拿到想要复制的值
navigator.clipboard.writeText(copy_text);
alert("复制成功!");//弹出提示信息,不同组件可能存在写法不同
});