JS全局复制粘贴板的精简兼容实现
作者：秋了秋 发表时间：2018年10月15日
目前看到很多网站的复制功能都是阉割版，出现各种不能复制，这么大的bug难道网站管理员没发现吗？不是的，可能在他们浏览器是正常的，而在用户那里就有可能不正常，因为浏览器不同。说明他们的程序兼容性极差。但这个现象却非常普遍！因为网上大部分的教程都是阉割版！又或者是代码非常复杂难以应用。
开门见山，今天侃侃这篇文章实现复制粘贴板的优点：
1. 代码精简清晰条理性，易维护修改
2. 兼容性良好，基本兼容所有浏览器，有Chrome（谷歌）浏览器（43及以上），Firefox（火狐）浏览器（41及以上），IE浏览器（9及以上），Opera （29及以上）， Safari （10及以上），可以理解为支持目前所有浏览器
3. 使用简单和自由，只需要指定需要复制的文本容器id或class，事件自己定义或者不通过事件也可以调用使用
4. 可以复制文本框的内容也可以复制其它网页任何地方的文字
5.支持跨区域复制，批量复制。
6.支持独立复制网页中不存在的文本（纯程序复制）。
6.支持svg文本的复制。
javascript代码：
window.copy = {
/*JS全局复制粘贴板的精简兼容实现
* by 秋叶博客 //netblog.cn/blog/498.html
* textContainer参数可以是选择器名称，也可以是文本
* callback是复制后执行的回调处理，可选，默认会弹出复制成功信息
*/
text: function(textContainer, callback) {
var copyTextArea = document.querySelectorAll(textContainer); //要拷贝的文本容器
var text = '';
if(!copyTextArea.length) {
text = textContainer;
} else {
for(var i = 0; i < copyTextArea.length; i++) {//把选择器所有的文本通过换行符拼接，取值区分输入框
text += ((copyTextArea[i].nodeName === 'INPUT' || copyTextArea[i].nodeName === 'TEXTAREA') ? copy.HTMLEncode(copyTextArea[i].value) : copyTextArea[i].textContent) + '\n';
}
}
this.div = document.createElement('pre');//创建临时容器，pre为了保证复制的内容带有格式，尤其是多段跨区域复制
this.div.innerHTML = text;
this.div.style.positon = 'absolute';
this.div.style.left = '-99999999';//把临时容器偏移到无穷远处，absolute不妨碍网页原本的内容定位和视觉
copyTextArea = this.div;
document.body.appendChild(this.div);
(copyTextArea.nodeName === 'INPUT' || copyTextArea.nodeName === 'TEXTAREA') ? copyTextArea.select(): copy.selectText(copyTextArea);
copyTextArea.focus()
try {
var successful = document.execCommand('copy');
if(!callback) {
callback = function() {
alert("文字已复制到剪贴板中");
};
}
if(successful) {
callback();
} else {
copy.alertError();
}
if(this.div) {
this.div.parentNode.removeChild(this.div);
}
} catch(err) {
copy.alertError();
}
},
HTMLEncode: function(html) {
var temp = document.createElement("div");
(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
var output = temp.innerHTML;
temp = null;
return output;
},
alertError: function() {
alert("无法复制，请手动选择文本复制");
},
selectText: function(copyTextarea) {
if(copyTextarea.hasAttribute('contenteditable')) {
copyTextarea.focus();
}
if(document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(copyTextarea);
range.select();
} else if(window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(copyTextarea);
selection.removeAllRanges();
selection.addRange(range);
}
}
};
使用教程:
需要注意的事，你的网页不能有copy这个对象，否则会被覆盖，引入前先检查。如重复，请把任意一个对象改名。 常规调用：
document.getElementById("button").onclick = function() {
copy.text('#textarea');
}
或者（回调调用，复制后执行自定义程序）：
document.getElementById("button").onclick = function() {
copy.text('#textarea', function(){
alert('复制成功啦！');
});
}
或者（跨区域复制，批量复制）：
copy.text('span');
或者（复制网页中不存在的文本（纯文本复制）：
copy.text('把我这段文字放到剪贴板');
或者（复制svg文本）：
copy.text('text');
37
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/498.html