20行JS代码实现粘贴板复制功能


Posted in Javascript onFebruary 06, 2018

使用剪贴板是一项基本技能。作为码农都应知道, Tab , Ctrl/Cmd + A , Ctrl / Cmd + C 以及 Ctrl / Cmd + V 分别是自动聚焦、复制、粘贴的快捷键。

而对普通用户可能就不太容易了。即使用户知道剪贴板是什么,(除了)那些眼神极好或反应很快的人,其他情况下很难以突出显示他们想要的确切文字。若用户不知道键盘快捷键,也看不到隐藏的编辑菜单,或从未使用右键菜单或不知道长按触屏弹出选项菜单,那么他很可能无法察觉到复制功能。

那么我们是否应该提供一个“复制到剪贴板”按钮来帮助用户?这功能应该会很有用,即使是对快捷键的人非常熟悉的用户来说。

关于剪贴板的安全

几年前,浏览器不可能直接使用剪贴板。开发人员不得不通过Flash来实现。

剪贴板看起来无关紧要,但想象一下,如果浏览器能够随意查看和操作内容,会发生什么。JS脚本(包括第三方脚本)能查看剪贴板内的文本信息,并将密码,敏感信息甚至整个文档发送到远程服务器。

现在的剪贴板基本功能有限,有如下限制:

  1. 大多数浏览器支持剪贴板,除了Safari。
  2. 支持因浏览器而异 ,有些功能不完整或有问题。
  3. 事件必须由用户必须发起,如点击鼠标或按下键盘。脚本不能自由访问剪贴板。

document.execCommand()

此方法就是实现剪贴板的关键,它可以传入 cut , copy , paste 三种参数。从最常用的 document.execCommand('copy') 开始介绍。

在使用之前,我们应该检查浏览器是否支持 copy 命令: document.queryCommandSupported('copy'); document.queryCommandEnabled('copy'); ,这两个方法效果相同。

但在Chrome下,尽管Chrome确实支持使用 copy 命名,但两个方法都返回 false 。所以最好是将检查代码包在一个 try-catch 代码块中。

下一步,我们应该允许用户复制什么呢?必须突出显示文本,所有浏览器都可用 select() 方法选择文本input和textarea内的文本。同时Firefox和Chrome / Opera也支持 document.createRange 方法,该方法允许从任何元素中选择文本,如下:

// select text in #myelement node
  var
   myelement = document.getElementById('#myelement'),
   range = document.createRange();
  range.selectNode(myelement);
  window.getSelection().addRange(range);

但IE / Edge不支持。

clipboard.js

若你不想自己实现一个较为健壮的跨浏览器剪贴板方法的话, clipboard.js 可以帮你。它有好几种设置选项的方式,如H5的data属性,设置绑定触发元素以及目标元素,如:

<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>

自己动手实现

clipboard.js大小仅2Kb,若仅实现如下的部分功能的话,那么可以在20行的代码内实现:

仅部分表单元素可被复制

若在不支持的浏览器中(没错,就是指Safari),可突出显示选中文本,并提示用户按 Ctrl / Cmd + C 。

像clipboard.js一样,先创建一个button用于触发方法,它具有一个data属性 data-copytarget ,指向要copy的元素(即 #website )

<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>
一个立即执行函数表达式绑定click事件的函数,该函数用于解析 data-copytarget 属性内容,选择对应字段的文本并执行 document.execCommand('copy') ,。若失败,文本保持选中状态,显示提示框:
(function() {
 'use strict';
 // click events
 document.body.addEventListener('click', copy, true);
 // event handler
 function copy(e) {
  // find target element
  var
   t = e.target,
   c = t.dataset.copytarget,
   inp = (c ? document.querySelector(c) : null);
  // is element selectable?
  if (inp && inp.select) {
   // select text
   inp.select();
   try {
    // copy text
    document.execCommand('copy');
    inp.blur();
   }
   catch (err) {
    alert('please press Ctrl/Cmd+C to copy');
   }
  }
 }
})();

示例

虽然在上例中,算上样式和动画的代码,代码已经超过20行了,但动画和样式是可选的。

总结:

  1. 通过 .select() 选择要复制的表单元素的内容
  2. 调用 document.execCommand("copy") 方法
  3. 调用 .blur() 方法,从表单元素中移除焦点
  4. 将第2、3步包在 try catch 块中,在不支持的浏览器下则提示

其他方式

有很多新颖的剪贴板应用方式。例如 Trello.com ,将鼠标悬停在卡片上时,可以按 Ctrl / Cmd + C 并将该卡片的链接地址复制到剪贴板。其背后实现的方式为:先创建一个包含URL的隐藏表单元素,然后选中并复制其内容。非常巧妙且实用 —— 我怀疑很少有用户知道这个功能!

总结

以上所述是小编给大家介绍的20行JS代码实现粘贴板复制功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
JS中offset和匀速动画详解
Feb 06 #Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 #Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 #Javascript
AngularJS实时获取并显示密码的方法
Feb 06 #Javascript
详解使用React进行组件库开发
Feb 06 #Javascript
fullpage.js最后一屏滚动方式
Feb 06 #Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 #Javascript
You might like
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
Joomla开启SEF的方法
2016/05/04 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
一个javascript参数的小问题
2008/03/02 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
了解ESlint和其相关操作小结
2018/05/21 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
在Python的循环体中使用else语句的方法
2015/03/30 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
Linux的文件类型
2012/03/07 面试题
海量信息软件测试笔试题
2015/08/08 面试题
大学生个人求职信范文
2013/09/21 职场文书
党建工作先进材料
2014/05/02 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
老员工辞职信范文
2015/05/12 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
php png失真的原因及解决办法
2021/11/17 PHP
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL