JS document.execCommand实现复制功能（带你出坑）
2021-02-08 19:15
标签：model bsp aci pre padding exe man var image 转自 ： https://www.cnblogs.com/minigrasshopper/p/8967339.html ------------------------------------------------------------------------------------------------------------ 最近项目中需要实现功能：点击button，复制input框的值； 我使用的是 document.execCommand(‘copy‘)的方法； 但是很郁闷的是，始终实现不了功能；代码如下 HTML代码 （v-model是vue框架中的双向数据绑定，不懂的请移步vue文档） JS代码 然后就郁闷了，就这么几行代码，为啥不行呢？JS和网上写的一模一样啊？？ 现在来解释为啥失败，踩了几个小时的坑 意思就是，input框要在正常的编辑状态下，暂且这么解释吧； 因为业务逻辑上input框确实不能编辑，所以disabled属性是必须要的； 那我用另一个input框展示相同的数据，然后设置opacity=0；这样就不可见了；（注意这里用hidden也是不行的） 但是新增的input还是占有空间，所以再来个粗暴的样式 position: absolute；这样就脱离了文档流； JS代码不变，修改HTML如下： -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 转自 ：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.htmlscript 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;
}">zxr876span>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;‘ >
var input = $(‘#input_url‘);
input.select();
document.execCommand("Copy");
不能实现的原因：
解决方案：
文章标题：JS document.execCommand实现复制功能（带你出坑）
文章链接：http://soscw.com/index.php/essay/52765.html