DDR爱好者之家

20行JS代码实现粘贴板复制功能
站长资源 2024/11/26 佚名
25 1538
DDR爱好者之家 Design By 杰米

使用剪贴板是一项基本技能。作为码农都应知道， 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 "_blank" href="https://codepen.io/SitePoint/pen/vNvEwE/">示例


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


总结：


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



其他方式


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


总结


以上所述是小编给大家介绍的20行JS代码实现粘贴板复制功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米