码迷,mamicode.com
首页 > Web开发 > 详细

JS document.execCommand实现复制功能(带你出坑)

时间:2020-06-09 14:23:54      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:model   bsp   aci   pre   padding   exe   man   var   image   

转自 : 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

JS document.execCommand实现复制功能(带你出坑)

标签:model   bsp   aci   pre   padding   exe   man   var   image   

原文地址:https://www.cnblogs.com/yehuisir/p/13072274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!