html全兼容剪切,JS全局复制粘贴板的精简兼容实现

目前看到很多网站的复制功能都是阉割版，出现各种不能复制，这么大的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 秋叶博客 //www.mizuiren.com/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');