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行的代码内实现:
1.仅部分表单元素可被复制
2.若在不支持的浏览器中(没错,就是指Safari)(译注,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');
}
}
}
})();
总结:
1.通过.select()
选择要复制的表单元素的内容
2.调用document.execCommand("copy")
方法
3.调用.blur()
方法,从表单元素中移除焦点
4.将第2、3步包在try catch
块中,在不支持的浏览器下则提示
其他方式
有很多新颖的剪贴板应用方式。例如Trello.com,将鼠标悬停在卡片上时,可以按Ctrl / Cmd + C
并将该卡片的链接地址复制到剪贴板。其背后实现的方式为:先创建一个包含URL的隐藏表单元素,然后选中并复制其内容。