一键复制功能
来源:互联网 发布:胡彦斌 知乎 编辑:程序博客网 时间:2024/04/28 23:31
需要引入jquery,clipboard
http://lib.baomitu.com/jquery/2.2.4/jquery.min.js
http://lib.baomitu.com/clipboard.js/1.6.1/clipboard.min.js
github:https://clipboardjs.com/
一键复制
<p id="itemWord" class="itemWord" style="font-size: 12px;">点击直接领券或一键复制按钮,打开「手淘APP」领券下单</p> <button type="button" data-clipboard-text="《FnKY0VOAkEd《" class="itemCopy" style="">一键复制</button>### 需要 data-clipboard-text 这个属性var clipboard = new Clipboard( '.itemCopy' );clipboard.on('success', function(e){ if(e.trigger.disabled == false || e.trigger.disabled == undefined) { e.trigger.innerHTML="复制成功,打开手淘购买"; e.trigger.style.backgroundColor="#9ED29E"; e.trigger.style.borderColor="#9ED29E"; //e.clearSelection(); e.trigger.disabled = true; //2秒后按钮恢复原状 setTimeout(function() { e.trigger.innerHTML="一键复制"; e.trigger.style.backgroundColor="#f54d23"; e.trigger.style.borderColor="#f54d23"; e.trigger.disabled = false; },2000); } }); clipboard.on('error', function(e) { e.trigger.innerHTML="复制失败"; e.trigger.style.backgroundColor="#8f8f8f"; e.trigger.style.borderColor="#8f8f8f"; });
监听复制的功能并选择文本
var word = document.querySelector('.itemWord'); document.addEventListener("selectionchange", function(e) { window.getSelection().selectAllChildren(word); }, false);
阅读全文
0 0
- 一键复制功能
- web页面一键复制按钮功能制作
- javaScript 一键复制
- 一键复制内容
- js一键复制
- 一键复制JS
- js一键复制,Clipboard.js:不用Flash实现剪贴板功能的轻量级JavaScript库
- 复制功能
- 一键复制文件路径
- 一键复制clipboard.js
- js实现一键复制
- 复制(克隆)一:dos功能---文件、分区复制(与ghost克隆功能一样)推荐首用
- 复制(克隆)一:dos功能---文件、分区复制(与ghost克隆功能一样)推荐首用
- 一键清理功能
- javascript实现复制功能
- Oracle9i高级复制功能
- DataRow复制功能
- js 复制功能
- Java开发-Java中链表的实现
- 利用链接复用来提高数据库读写速度
- 微信开发者工具更新后所有程序都报wxss编译错误
- JS高级程序设置笔记(h5新特性)
- 创建游标
- 一键复制功能
- 模仿NGUI实现SoftClip(一)
- exit和return的区别
- 上机练习题—继承
- 算法导论:c++桶排序
- vue利用axios处理开发环境和生成环境的跨域问题
- Bootstrap——表单
- 浏览器cookie学习笔记
- Google 今日发布基于 TensorFlow 运行的 DIY 工具包:AIY Vision Kit