未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

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

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

关于剪贴板的安全

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

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

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

大多数浏览器支持剪贴板,除了Safari。

支持因浏览器而异 ,有些功能不完整或有问题。

事件必须由用户必须发起,如点击鼠标或按下键盘。脚本不能自由访问剪贴板。

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行了,但动画和样式是可选的。

总结:

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

其他方式

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

总结

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


您可能感兴趣的文章:JS复制对应id的内容到粘贴板(Ctrl+C效果)javascript实现复制内容到粘贴板代码js实现点击图片将图片地址复制到粘贴板的方法js 实现复制到粘贴板的功能代码JS复制特定内容到粘贴板

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: copy,document,剪贴,浏览器,data,Ctrl,gt,lt,select,js,粘贴,文本,clipboard
分页:12
转载请注明
本文标题:20行JS代码实现粘贴板复制功能
本站链接:http://www.codesec.net/view/572483.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(41)