概念
- web可見區(qū)域的文本,點(diǎn)擊按鈕復(fù)制到粘貼板上。
- 由于安全性考慮挑秉,火狐谷歌都不直接暴露出復(fù)制粘貼的接口,火狐復(fù)制粘貼的時(shí)候還要用戶允許苔货,IE有一個(gè)
window.clipboardData
接口直接設(shè)置復(fù)制內(nèi)容犀概。
解決方案
- IE下直接調(diào)用
window.clipboardData
就ok了,但還要考慮兼容性 - 火狐谷歌下可以通過監(jiān)聽‘crtl+C’的事件觸發(fā)夜惭,來獲取復(fù)制對(duì)象姻灶,對(duì)其做操作。那么還要模擬鍵盤輸入(模擬成功也不會(huì)觸發(fā)該事件)诈茧。代碼如下
$(document.body).bind({
copy: function(e) {//copy事件
var cpTxt = "復(fù)制的數(shù)據(jù)";
var clipboardData = window.clipboardData; //for IE
if (!clipboardData) { // for chrome
clipboardData = e.originalEvent.clipboardData;
} //可以獲取用戶選中復(fù)制的數(shù)據(jù)
clipboardData.setData('Text', cpTxt);
alert(cpTxt);
$('#message').text('Copy Data : ' + cpTxt);
return false;//否則設(shè)不生效
}});
2`. 此處引入模擬鍵盤輸入代碼http://www.cnblogs.com/liyunhua/p/4526556.html (坑~) - 第三種解決方案是使用zeroClipboard插件产喉,這個(gè)是利用flash生成一個(gè)看不見的flash浮在按鈕。這個(gè)缺點(diǎn)是生成flash要點(diǎn)擊兩次才可以獲取到敢会,還有不兼容的問題曾沈,而且浮在按鈕上的手勢也沒了。尤其現(xiàn)在都在淘汰flash,不推薦此方法
- 純JS的插件Clipboard走触,一直在報(bào)Clipboard not defined晦譬。時(shí)間有限,有機(jī)會(huì)研究(坑)
- 我現(xiàn)在使用的一下方法互广,用到了
window.execCommand
接口敛腌。代碼如下
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);}
原理是模擬一個(gè)看不見的textarea,獲取里面預(yù)設(shè)的內(nèi)容信息惫皱。感覺不夠美觀像樊,但是功能實(shí)現(xiàn)了 - 有一種使用svg方式進(jìn)行復(fù)制粘貼的方式