电光石火-穿越时空电光石火-穿越时空


document.execCommand没有效果

最近用到 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">

本博客所有文章如无特别注明均为原创。作者:似水的流年
版权所有:《电光石火-穿越时空》 => document.execCommand没有效果
本文地址:http://ilkhome.cn/index.php/archives/731/
欢迎转载!复制或转载请以超链接形式注明,文章为 似水的流年 原创,并注明原文地址 document.execCommand没有效果,谢谢。

评论