JS document.execCommand实现复制功能

转载自 JS document.execCommand实现复制功能

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

JS document.execCommand实现复制功能相关推荐

js 复制指定元素内的文本信息到剪切板（navigator.clipboard和document.execCommand）
因为 document.execCommand('copy')已被弃用,所以我们首选navigator.clipboard进行异步获取 //navigator clipboard 向剪贴板写文本 na ...
js 复制文本到剪切板 document.execCommand(“copy“)
本函数的原理是调用document.execCommand的copy命令 document.execCommand("copy")对不同浏览器的兼容性不同,详情请在这里参考函数: ...
js调用浏览器的复制功能复制内容到剪切板
js调用浏览器的复制功能: 浏览器自带复制粘贴功能,通过js调用浏览器的复制功能实现复制文本内容到剪切板浏览器复制命令:document.execCommand('Copy') 具体代码实现: // ...
document.execCommand()方法处理Html数据
document.execCommand()方法处理Html数据时常用语法格式如下: document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指 ...
JavaScript：document.execCommand()的用法
document.execCommand()的用法小记一.语法 execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用. 如下格式:document.ex ...
Javascript中document.execCommand()的用法
document.execCommand()方法处理Html数据时常用语法格式如下: document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指 ...
简易博客编辑器：玩转document.execCommand命令
xhEditor是基于jQuery开发的跨平台轻量可视化XHTML编辑器,基于LGPL开源协议发布.今天就把它山寨一下. 上几张图,看看效果: 先做出菜单部分:发现是一张背景图片,所以用图片映射的方法 ...
h5使用js的点击复制功能，兼容安卓和ios，亲测有效
一小时三更的我,勤劳的像头大黄牛又是因为ios,我就想不明白了,为什么还有人用苹果-此条信息来自尊贵的苹果x plues 至尊黑代码如下网页代码 <input style="po ...
js实现点击复制功能
一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=d ...

JS document.execCommand实现复制功能

不能实现的原因：

解决方案：

JS document.execCommand实现复制功能相关推荐

最新文章

热门文章