JS document.execCommand实现复制功能（带你出坑）
- 工作小总结
- 时间：2021-09-28 13:11
- 3314人已阅读
简介
最近项目中需要实现功能：点击button，复制input框的值；我使用的是 document.execCommand('copy')的方法；但是很郁闷的是，始终实现不了功能；代码如下HTML代码（v-model是vue框架中的双向数据绑定，不懂的请移步vue文档）<input id='input_url' v-model='
🔔🔔🔔好消息!好消息!🔔🔔🔔
有需要的朋友👉:联系凯哥
最近项目中需要实现功能：点击button，复制input框的值；
我使用的是 document.execCommand('copy')的方法；
但是很郁闷的是，始终实现不了功能；代码如下
HTML代码
（v-model是vue框架中的双向数据绑定，不懂的请移步vue文档）
<input id='input_url' v-model='product_url' disabled type="text">
JS代码
var input = $('#input_url');
input.select();
document.execCommand("Copy");然后就郁闷了，就这么几行代码，为啥不行呢？JS和网上写的一模一样啊？？
现在来解释为啥失败，踩了几个小时的坑
不能实现的原因：
input框不能有disabled属性
根据第一条扩展，input的width || height 不能为0；
input框不能有hidden属性
意思就是，input框要在正常的编辑状态下，暂且这么解释吧；
解决方案：
因为业务逻辑上input框确实不能编辑，所以disabled属性是必须要的；
那我用另一个input框展示相同的数据，然后设置opacity=0；这样就不可见了；（注意这里用hidden也是不行的）
但是新增的input还是占有空间，所以再来个粗暴的样式 position: absolute；这样就脱离了文档流；
JS代码不变，修改HTML如下：
<input id='input_url' v-model='product_url' style='opacity: 0;position: absolute;' type="text"> <input v-model='product_url' disabled type="text">
https://www.cnblogs.com/minigrasshopper/p/8967339.html