最近用到 document.execCommand('Copy')的方法,实现点击button,复制input框的值;
但是很郁闷的是,始终实现不了功能;代码如下
<input id="test" disabled type="text">
var test = $("#test");
test.select();
document.execCommand("Copy");
来解释为啥不行:
不能实现的原因:
- input框不能有disabled属性
- 根据第一条扩展,input的width || height 不能为0;
- input框不能有hidden属性
意思就是,input框要在正常的编辑状态下,暂且这么解释吧;
解决方案:
因为业务逻辑上input框确实不能编辑,所以disabled属性是必须要的;
那我用另一个input框展示相同的数据,然后设置opacity=0;这样就不可见了;(注意这里用hidden也是不行的)
但是新增的input还是占有空间,所以再来个粗暴的样式 position: absolute;这样就脱离了文档流;
JS代码不变,修改HTML如下:
<input id="test" style="opacity: 0;position: absolute;" type="text">
<input id="test_copy" disabled type="text">