JS document.execCommand实现复制功能(带你出坑)
2018-04-28 14:17
465 查看
最近项目中需要实现功能:点击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">
相关文章推荐
- 前端复制功能的若干 -- document.execCommand()
- JS、Flash 实现复制功能 (浏览器兼容)
- JS实现复制功能
- Zero Clipboard js+swf实现的复制功能使用方法
- JS实现点击复制功能(ZeroClipboard)
- js实现firefox、chrome、ie浏览器复制功能
- js/jQuery实现复制到剪贴板功能,兼容所有浏览器
- js一键复制,Clipboard.js:不用Flash实现剪贴板功能的轻量级JavaScript库
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
- js 实现复制到粘贴板的功能代码
- js中实现 复制到剪切板 功能
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
- JS的document.execCommand()
- 纯js实现复制到剪贴板功能
- js实现复制功能(文件上传)
- js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)
- JS实现复制/粘贴功能
- js实现pc浏览器复制粘贴功能
- Clipboard.js实现复制文本到剪贴板功能
- Zero Clipboard js+swf实现的复制功能使用方法