資訊專欄INFORMATION COLUMN
摘要：原因由于我太懶了不想每次在瀏覽器里都要鼠標(biāo)拖很長(zhǎng)一串然后在復(fù)制所以我想快速?gòu)?fù)制平時(shí)雙擊或三連擊選文案的情況還是蠻多的所以就決定實(shí)現(xiàn)一個(gè)油猴的腳本這樣就可以方便的玩耍了實(shí)現(xiàn)實(shí)現(xiàn)起來很簡(jiǎn)單選中時(shí)通過獲取到選中的文字然后執(zhí)行拷貝到剪切板中有一個(gè)判
原因
由于我太懶了, 不想每次在瀏覽器里都要鼠標(biāo)拖很長(zhǎng)一串,然后在command+c復(fù)制,所以我想快速?gòu)?fù)制.平時(shí)雙擊或三連擊選文案的情況還是蠻多的,所以就決定實(shí)現(xiàn)一個(gè)油猴的腳本,這樣就可以方便的玩耍了
實(shí)現(xiàn)
(function () {
"use strict";
window.__copy_text_to_clipboard__ = true;
// window.__copy_text_to_clipboard__ === true;
// iframe.contentWindow.__copy_text_to_clipboard__ === undefined
function copyToClipboard(str) {
const textAreaElement = document.createElement("textarea");
const iframe = this.__copy_text_to_clipboard__ ? document.createElement("iframe") : textAreaElement;
iframe.style.display = "none";
textAreaElement.value = str;
document.body.appendChild(iframe);
if (this.__copy_text_to_clipboard__) {
iframe.contentDocument.body.append(textAreaElement)
}
textAreaElement.select();
document.execCommand("copy");
document.body.removeChild(iframe);
}
function mouseHandle(event) {
const detail = event.detail;
const text = this.getSelection().toString();
// if the text is empty or click event neither double click nor triple click
if (!text.trim().length || (detail !== 2 && detail !== 3)) {
return;
}
copyToClipboard.call(this, text)
}
// notice the dynamic iframes are not queried
const iframes = document.querySelectorAll("iframe");
[...iframes].forEach(iframe => {
iframe.onload = function () {
const contentWindow = iframe.contentWindow;
const contentDocument = iframe.contentDocument;
// handle iframe copy
contentDocument.addEventListener("click", mouseHandle.bind(contentWindow));
}
})
document.addEventListener("click", mouseHandle.bind(window));
})();
實(shí)現(xiàn)起來很簡(jiǎn)單, 選中時(shí)通過window.getSelection獲取到選中的文字,然后執(zhí)行document.execCommand("copy")拷貝到剪切板
copyToClipboard 中有一個(gè)判斷, 那為什么要有這個(gè)判斷呢?原因就是我這個(gè)人有強(qiáng)迫癥, 如果不用iframe, 只是用textarea會(huì)造成選中文字的失焦(選中文字不高亮),所以用了iframe.
理想情況就不需要這個(gè)判斷,無論什么情況都用iframe來實(shí)現(xiàn)拷貝, 但是問題出現(xiàn)了, iframe在選中時(shí)候不會(huì)復(fù)制到剪切板 因此在iframe下選中還得用textarea...
因?yàn)?b>iframe不在當(dāng)前文檔中,因此iframe選中的高亮不會(huì)因?yàn)?b>textare.select()而造成失焦
在線demo(要裝油猴插件)
gist地址
只需要雙擊想要復(fù)制的文字或者三連擊選中一長(zhǎng)串?dāng)?shù)字就可以復(fù)制到剪切板了.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103980.html
摘要：參考增強(qiáng)神器，文檔搜索效率何止翻倍推薦系數(shù)圖片展示快速獲取文件文件夾名稱插件來源開發(fā)者插件介紹如名，鼠標(biāo)選中文件或者文件夾，點(diǎn)擊鼠標(biāo)中鍵激活插件即可將文件文件夾名稱復(fù)制到剪切板。 ...
摘要：分享一些超好用插件，打造一個(gè)不一樣的瀏覽器編輯器。一谷歌瀏覽器插件谷歌訪問助手強(qiáng)烈推薦一鍵安裝，無需其他配置，即可訪問谷歌。谷歌瀏覽器是很耗內(nèi)存的，該插件會(huì)自動(dòng)掛起長(zhǎng)時(shí)間未使用的網(wǎng)頁(yè)，來釋放系統(tǒng)資源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一個(gè)不一樣的 GitHub、瀏覽器、...
摘要：反過來，在的模式下，按命令開始選擇一段文本，然后按下，就把文字復(fù)制到系統(tǒng)的剪切板了，隨便找個(gè)文本編輯器如，按，就會(huì)發(fā)現(xiàn)剛才復(fù)制的內(nèi)容粘貼出來了。 Vim的文本復(fù)制，邏輯上要比我們?nèi)粘５目截?、粘貼要復(fù)雜些。 之前看了很多文章，真是太復(fù)雜了，復(fù)制個(gè)東西搞得好像系統(tǒng)性的工程建設(shè)一樣。其實(shí)兩句話就解釋明白的。參考這篇文章：vim的剪切板 首先輸入:reg命令，查看Vim記錄的所有剪切板內(nèi)容，大...
摘要：取消默認(rèn)的復(fù)制事件被復(fù)制的文字等下插入防知乎掘金復(fù)制一兩個(gè)字則不添加版權(quán)信息超過一定長(zhǎng)度的文字就添加版權(quán)信息作者鏈接來源掘金著作權(quán)歸作者所有。以上參考資料高程操作剪貼板網(wǎng)頁(yè)上如何實(shí)現(xiàn)禁止復(fù)制粘貼以及如何破解原生實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...
閱讀 3085·2021-11-25 09:43
閱讀 1057·2021-11-24 10:22
閱讀 1399·2021-09-22 15:26
閱讀 713·2019-08-30 15:44
閱讀 2492·2019-08-29 16:33
閱讀 3739·2019-08-26 18:42
閱讀 948·2019-08-23 18:07
閱讀 1861·2019-08-23 17:55
