无锡网站推广优化公司,百度推广开户怎么开,wap网站 手机网站,伍佰亿网站怎么样转载自 JS document.execCommand实现复制功能
最近项目中需要实现功能#xff1a;点击button#xff0c;复制input框的值#xff1b;
我使用的是 document.execCommand(copy)的方法#xff1b;
但是很郁闷的是#xff0c;始终实现不了功能#xff1b;代码如下
HTML代…转载自 JS document.execCommand实现复制功能
最近项目中需要实现功能点击button复制input框的值
我使用的是 document.execCommand(copy)的方法
但是很郁闷的是始终实现不了功能代码如下
HTML代码
v-model是vue框架中的双向数据绑定不懂的请移步vue文档
input idinput_url v-modelproduct_url disabled typetext
JS代码
var input $(#input_url);
input.select();
document.execCommand(Copy);
然后就郁闷了就这么几行代码为啥不行呢JS和网上写的一模一样啊
现在来解释为啥失败踩了几个小时的坑
不能实现的原因
input框不能有disabled属性根据第一条扩展input的width || height 不能为0input框不能有hidden属性
意思就是input框要在正常的编辑状态下暂且这么解释吧
解决方案
因为业务逻辑上input框确实不能编辑所以disabled属性是必须要的
那我用另一个input框展示相同的数据然后设置opacity0这样就不可见了注意这里用hidden也是不行的
但是新增的input还是占有空间所以再来个粗暴的样式 position: absolute这样就脱离了文档流
JS代码不变修改HTML如下
input idinput_url v-modelproduct_url styleopacity: 0;position: absolute; typetext
input v-modelproduct_url disabled typetext
