用两行代码实现七行代码才能实现的功能,就是一种进步

35 阅读1分钟

项目中需要实现复制功能,怎么实现呢?前期使用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("复制成功!");//弹出提示信息,不同组件可能存在写法不同
});