转载自  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实现复制功能相关推荐

  1. js 复制指定元素内的文本信息到剪切板(navigator.clipboard和document.execCommand)

    因为 document.execCommand('copy')已被弃用,所以我们首选navigator.clipboard进行异步获取 //navigator clipboard 向剪贴板写文本 na ...

  2. js 复制文本到剪切板 document.execCommand(“copy“)

    本函数的原理是调用document.execCommand的copy命令 document.execCommand("copy")对不同浏览器的兼容性不同,详情请在这里参考 函数: ...

  3. js调用浏览器的复制功能复制内容到剪切板

    js调用浏览器的复制功能: 浏览器自带复制粘贴功能,通过js调用浏览器的复制功能实现复制文本内容到剪切板 浏览器复制命令:document.execCommand('Copy') 具体代码实现: // ...

  4. document.execCommand()方法处理Html数据

    document.execCommand()方法处理Html数据时常用语法格式如下: document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指 ...

  5. JavaScript:document.execCommand()的用法

    document.execCommand()的用法小记 一.语法 execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用. 如下格式:document.ex ...

  6. Javascript中document.execCommand()的用法

    document.execCommand()方法处理Html数据时常用语法格式如下: document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指 ...

  7. 简易博客编辑器:玩转document.execCommand命令

    xhEditor是基于jQuery开发的跨平台轻量可视化XHTML编辑器,基于LGPL开源协议发布.今天就把它山寨一下. 上几张图,看看效果: 先做出菜单部分:发现是一张背景图片,所以用图片映射的方法 ...

  8. h5使用js的点击复制功能,兼容安卓和ios,亲测有效

    一小时三更的我,勤劳的像头大黄牛 又是因为ios,我就想不明白了,为什么还有人用苹果-此条信息来自尊贵的苹果x plues 至尊黑 代码如下 网页代码 <input style="po ...

  9. js实现点击复制功能

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=d ...

最新文章

  1. jquery对ajax的支持
  2. django项目实战(2)-数据库配置
  3. 配合jenkins 启动jar包需要的脚本
  4. Caused by: java.net.BindException: Could not start rest endpoint on any port in port range 8085
  5. P5200 [USACO19JAN]Sleepy Cow Sorting 牛客假日团队赛6 D 迷路的牛 (贪心)
  6. python剑指offer面试题_剑指Offer(Python语言)面试题38
  7. Power BI 将商业智能数据转换为数据理解
  8. Android 使用SWIG生成Jni代码转
  9. 查看mysql数据插入时间_[译] MySQL 最佳实践 —— 高效插入数据
  10. 转载:[Matlab]结构体(Struct)
  11. python课程-Python课程
  12. .net反射调用值类型引用参数时的处理办法(转)
  13. android MVC
  14. 极客大学产品经理训练营 产品思维和产品意识(下) 第5课总结
  15. 盘点八个程序员必须知道的代码编辑器
  16. 3dmax、python3、Rational Rose、DTLite、commons-math3、VM12、DreamWeaver、SPSS、sqlserver2008、mySQL等软件安装包最全集合
  17. AutoCAD各版本注册表参数
  18. 刀具寿命预测研究方法
  19. 自学量化投资之旅-学习第一个策略EMV指标
  20. 古诗文欣赏-春夜宴桃李园序

热门文章

  1. golang 切片 接口_Golang语言常用关键字之 make 和 new
  2. requestPermissions读写手机存储权限_泛圈云盘可为企业建立高效安全的云办公在线协同文档存储?...
  3. Leetcode周赛复盘——第 71 场力扣双周赛与第 279 场力扣周赛
  4. c语言迪思卡尔算法,【论文】数字化的意匠_数字化设计与造型的认知学反思_谭峥.pdf...
  5. java 解析 manifest_解析AndroidManifest.xml之AXMLParser.java | 学步园
  6. [PAT乙级]1018 锤子剪刀布
  7. 数据结构与算法一篇帮助你吃下KMP算法
  8. windows 仍在设置此设备的类配置。 (代码 56)_谷歌发布Flutter Alpha:支持Windows
  9. 对pca降维后的手写体数字图片数据分类_机器学习:数据的准备和探索——特征提取和降维...
  10. UVA719 Glass Beads 最小表示 / 后缀自动机