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 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
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函数的实现原理及性能分析(二)
2015/05/13 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
深入理解Python中变量赋值的问题
2017/01/12 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
基于PyTorch中view的用法说明
2021/03/03 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
矫正人员思想汇报
2014/01/08 职场文书
大雁塔英文导游词
2015/02/10 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL