1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JS document.execCommand实现复制功能

JS document.execCommand实现复制功能

时间:2020-07-28 17:48:23

相关推荐

JS document.execCommand实现复制功能

转载自JS document.execCommand实现复制功能

最近项目中需要实现功能:点击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">

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。