如何用20行JS代码实现粘贴板功能那么我们是否应该提供一个“复制到剪贴

点击上方“

程序人生

”，选择“置顶公众号”

第一时间关注程序猿（媛）身边的故事

使用剪贴板是一项基本技能。作为码农都应知道，

Tab

Ctrl/Cmd + A

，

Ctrl / Cmd + C

以及

Ctrl / Cmd + V

分别是自动聚焦、复制、粘贴的快捷键。

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

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

关于剪贴板的安全

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

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

现在的剪贴板基本功能有限，有如下限制：

1.大多数浏览器支持剪贴板，除了Safari。(

译注，Safari其实已经支持

)

支持因浏览器而异

，有些功能不完整或有问题。

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

#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=http://www.gunmi.cn/v/

"text in this field will be copied"

button

src="http://img5.shadafang.com/img.php?http://mmbiz.qpic.cn/mmbiz_png/1hReHaqafaeKv9WqOYhrzETTLpghUYOcJtib9ntvtQgnYiccqytbiaGswzgyXHu85v3IlbHQXvMibRm3lHPRtHXG2g/640?wx_fmt=png" />