tags:
- js
- ctrl+c
網(wǎng)頁(yè)內(nèi)容復(fù)制粘貼(三種方案 兼容多種瀏覽器)
對(duì)網(wǎng)頁(yè)上的內(nèi)容實(shí)現(xiàn)復(fù)制粘貼的功能
痛點(diǎn)：需要支持多種不同的瀏覽器 主要有IE，F(xiàn)irefox
- IE瀏覽器下的解決方案：
window.clipboardData.setData("Text", text); - 通用瀏覽器的解決方案：
選中元素之后執(zhí)行：
document.execCommand('copy') - Firefox下的解決方案
兩種折中的方案
a. 監(jiān)聽(tīng)hover事件 當(dāng)鼠標(biāo)移動(dòng)至需要復(fù)制的文本上時(shí) 用戶(hù)按下ctrl+c 實(shí)現(xiàn)復(fù)制
b.window.prompt("Copy to clipboard: Ctrl+C, Enter", text);彈出框內(nèi)容為選中的文案裁着，用戶(hù)按下ctrl+c 實(shí)現(xiàn)復(fù)制
整合之后的代碼為
function copyToClipboard(text) {
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData("Text", text);
} else {
var textArea = document.createElement("textarea");
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
if (!document.execCommand('copy')) {
copyToClipboardMozilla(text);
} else {
showInfo("提示", "復(fù)制成功")
}
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
}
function copyToClipboardMozilla(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
$(".copy").on("mouseenter", function () {
$(this).css("background-color", "#c8c9c8");
$(this).focus();
var textArea = document.createElement("textarea");
textArea.style.background = 'transparent';
textArea.id = "copyContent";
textArea.value = $(this).text();
document.body.appendChild(textArea);
textArea.select();
})
$(".copy").on("mouseleave", function () {
$(this).css("background-color", "");
document.body.removeChild(document.getElementById("copyContent"));
})
參考資料：
- 幾個(gè)通用的解決復(fù)制的方法：
-
document.execCommand API
W3C API - How do I copy to the clipboard in JavaScript?
- How does Trello access the user's clipboard?
- 20 行 JS 代碼跨算，實(shí)現(xiàn)復(fù)制到剪貼板功能
兼容處理了瀏覽器的復(fù)制功能诸蚕，有更好的方案解決歡迎留言聯(lián)系
未經(jīng)作者允許 請(qǐng)勿轉(zhuǎn)載氧猬，謝謝 :)
