前言
在做web站开发的过程中，需要对某些内容实现复制到剪切板的功能，实现过程中有些不得不说的坑做个小记，避免以后再次踩坑。
1.clipboardData
//该方案仅支持IE内核的浏览器
function copyToClipBoard(copyText) {
if (window.clipboardData) {
window.clipboardData.setData("Text", copyText);
}
}
2.document.execCommand('copy')
//该方案支持主流浏览器
//缺陷在于，在石勇jq的select()选中要copy的元素时仅支持text和textarea,并且需要以用户角度触发copy操作
<input type="text" id="twitter" value="http://twitter.com/craigbuckler" />
<button data-copytarget="#twitter">copy</button>
(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();
// copied animation
t.classList.add('copied');
setTimeout(function() { t.classList.remove('copied'); }, 1500);
}
catch (err) {
alert('please press Ctrl/Cmd+C to copy');
}
}
}
})();
