微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

20 行 JS 代码,实现复制到剪贴板功能

2016-05-20 20:23 伯乐在线/唐耶尔

(点击上方公众号,可快速关注)


英文:Craig Buckler

译者:伯乐在线 - 唐耶尔

链接:http://web.jobbole.com/86054/


使用系统提供的剪贴板是一项基本的IT技能。作为一个开发者,相信你已经知道使用 Ctrl/Cmd+A, Ctrl/Cmd+C 以及 Ctrl/Cmd+V 组合键就能快捷地进行选中、复制、粘贴。


但对于普通用户来说就没那么容易了。即使用户知道剪贴板的存在,视力再好、反应再快的用户也很难选中他们想要的文字。接下来,如果用户没有掌握快捷键,或者没发现浏览器隐藏的“编辑”菜单,又或者没用过右键菜单,再或者不知道在触摸屏上需要进行长按,后续的复制过程也很难简单完成。


如果提供一个一键“复制到剪贴板”按钮,是不是就能帮到大家呢?这样的话即使是熟练的键盘快手也会乐于使用吧。


剪贴板的安全机制


几年前,因为浏览器不具备直接访问剪贴板的能力,开发者只能借助于Flash插件来提供这一基本功能。


乍一看开放剪贴板权限似乎没什么危害,但试想如果浏览器能随意查看和操作剪贴板内容的话,页面脚本(包括第三方脚本)岂不是就能轻松偷窥其中的信息然后将密码,敏感信息,甚至整个页面发送给远端的服务器了。


现在,我们已经可以整合基本的剪贴板功能,但还是有一些限制:


  1. 大部分浏览器支持剪贴板功能,Mac和iOS上的Safari除外。

  2. 不同浏览器的支持程度不尽相同,一些功能并不完整或存在缺陷。

  3. 用户必须通过点击鼠标或按键的方式来主动触发,脚本并不能随时操纵剪贴板。


document.execCommand() 方法


document.execCommand() 是需要调用的关键方法,它可以传入的参数包括 ‘cut’, ‘copy’ 和 ‘paste’ 。这里重点介绍最实用的 document.execCommand(‘copy’) 方法。


在调用之前,可以使用 document.queryCommandSupported(‘copy’); 或 document.queryCommandEnabled(‘copy’); 方法(这两个方法功能相同)来检测浏览器是否支持复制命令。需要注意的是,Chrome 虽然支持复制命令的,但在 Chorme 中这两个方法都会返回 false 值。检测 document.execCommand 方法是否存在也是一个判断方法,但更好的做法是将 document.execCommand(‘copy’) 调用放在 try-catch 块内。


接下来就得考虑用户能复制什么内容了,脚本需要能够选中文本,好在所有的浏览器都允许使用 select() 方法选择文本输入和文本区域的内容,并且在 Firefox 和 Chrome/Opera 浏览器中,还能使用 document.createRange 方法来从任何元素中选择文本。


// select text in #myelement node

// 选择 #myelement 标签中的文本

var

  myelement = document.getElementById('#myelement'),

  range = document.createRange();

 

range.selectNode(myelement);

window.getSelection().addRange(range);


然而,IE/Edge 并不支持这一方法。


使用clipboard.js


如果你已经放弃打造一个高鲁棒性的跨浏览器剪贴板方案,那么 clipboard.js 会是一个不错的选择。它提供了多种配置方法,例如通过添加 HTML5 数据属性来指定触发器和复制对象。


<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 一样,我们会使用一个按钮作为触发器,添加数据属性(data-copytarget)来指定拷贝内容的目标(#website):


<input type="text" id="website" value="http://www.sitepoint.com/" />

<button data-copytarget="#website">copy</button>


下面的自执行函数会给所有带有 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 &amp;amp;&amp;amp; inp.select) {

 

      // select text

      // 选择文本

      inp.select();

 

      try {

        // copy text

        // 复制文本

        document.execCommand('copy');

        inp.blur();

      }

      catch (err) {

        alert('please press Ctrl/Cmd+C to copy');

      }

 

    }

 

  }

 

})();


其他用途


你还可以设计出更棒的剪贴板功能特性。例如,在 Trello.com 网站中,当你把鼠标指针放在任何卡片上方时,使用快捷键 Ctrl/Cmd+C 就能将卡片的url复制到剪贴板。实际上,程序创建了一个包含 URL 地址的隐藏表单然后进行了选中和复制。虽然我怀疑很少有用户会知道这一功能,但这的确是实用又聪明的方法!


欢迎在评论区分享你的看法


【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 详解Javascript中的Object对象 结合个人经历总结的前端入门方法 前端不为人知的一面–前端冷知识集锦 一份优秀的前端开发工程师简历是怎么样的? 浅谈Web缓存
猜您喜欢 武汉5期UI设计就业班开班——快乐梦想游! java培训需要多少钱,学习java贵不贵 【第1章第131回】实现简易 ES6 Promise 功能 (一) 大数据┃牛津大学Ralph Schroeder:大数据与知识的未来 完整篇:100+个MySQL调试和优化技巧(2)