JS document.execCommand实现复制功能（带你出坑）

Posted 2020-12-09 搬砖小伙子

转自 ： https://www.cnblogs.com/minigrasshopper/p/8967339.html

<script type="text/javascript">
    function gocopy_copy() {
     
        let input = document.querySelector(\'#demoInput\');
        //alert(input);
       let data =  input.select();
      // alert(data);
           //document.execCommand(\'gocopy_copy\') 
           document.execCommand(\'copy\');
            
            //  location.href="weixin://";
            // window.open(\'weixin://\',"_blank");  
            // alert(\'复制成功,准备跳转到微信\');
            alert("微信号复制成功,现在进入微信添加好友"); 
         window.location.href=\'weixin://\';
           
        
        
    }
 
</script>


<div style="position: fixed;left:0 ;bottom: 0px;width: 100%;height: 70px;line-height:50px;padding: 5px 5px 5px 5px;font-size: 16px;background-color: #fff;
    border-top: 1px solid #ccc;    max-width: 740px;z-index:9999;" onclick="gocopy_copy()">
    <div style="width: 15%;float: left;"><img src="http://v1.cdn-static.cn/2020/6/9/62063_kb6petyo.png?imageView2/2/w/1400" style="width: 50px"></div>
    <div style="width: 45%;float: left;line-height:25px;"><p>微信:<span style="    font-size: 16px;
    background-color: #ffff00;
    color: #ff0000;
    padding: 0px 2px;font-weight: bold;
}">zxr876</span></p><p>(欢迎您前来咨询)</p></div>
    <div  class="copy" style="margin-top:5px;"><img  class="tcpyq" src="http://v1.cdn-static.cn/2020/6/9/62063_kb6pety1.png?imageView2/0/w/390" style="width: 120px;"></div>
</div>

<input id="demoInput" value="zxr876" type="text" style=\'opacity: 0;position: absolute;\' >

 

------------------------------------------------------------------------------------------------------------

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