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 相关文章推荐
jQuery中获取Radio元素值的方法
Jul 02 Javascript
javascript内存管理详细解析
Nov 11 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
JavaScript this关键字的深入详解
Jan 14 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中防止SQL注入方法详解
2014/12/25 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
js右键菜单效果代码
2007/07/21 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python 将md5转为16字节的方法
2018/05/29 Python
值得收藏的10道python 面试题
2019/04/15 Python
python中eval与int的区别浅析
2019/08/11 Python
如何基于python实现不邻接植花
2020/05/01 Python
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
总经理检讨书范文
2015/02/16 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python