油猴腳本: 快速復制文字到剪切板

springDevBird 發布于2019-08-23 17:12 / 1588人閱讀

摘要：原因由于我太懶了不想每次在瀏覽器里都要鼠標拖很長一串然后在復制所以我想快速復制平時雙擊或三連擊選文案的情況還是蠻多的所以就決定實現一個油猴的腳本這樣就可以方便的玩耍了實現實現起來很簡單選中時通過獲取到選中的文字然后執行拷貝到剪切板中有一個判

原因

由于我太懶了, 不想每次在瀏覽器里都要鼠標拖很長一串,然后在command+c復制,所以我想快速復制.平時雙擊或三連擊選文案的情況還是蠻多的,所以就決定實現一個油猴的腳本,這樣就可以方便的玩耍了

實現


(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));

})();

實現起來很簡單, 選中時通過window.getSelection獲取到選中的文字,然后執行document.execCommand("copy")拷貝到剪切板

copyToClipboard 中有一個判斷, 那為什么要有這個判斷呢?

原因就是我這個人有強迫癥, 如果不用iframe, 只是用textarea會造成選中文字的失焦(選中文字不高亮),所以用了iframe.

理想情況就不需要這個判斷,無論什么情況都用iframe來實現拷貝, 但是問題出現了, iframe在選中時候不會復制到剪切板 因此在iframe下選中還得用textarea...

因為iframe不在當前文檔中,因此iframe選中的高亮不會因為textare.select()而造成失焦

在線demo(要裝油猴插件)

gist地址

只需要雙擊想要復制的文字或者三連擊選中一長串數字就可以復制到剪切板了.

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103980.html

【長期更新】盤一盤那些 uTools 高質量插件，讓你的工作效率瞬間提升N倍！

摘要：參考增強神器，文檔搜索效率何止翻倍推薦系數圖片展示快速獲取文件文件夾名稱插件來源開發者插件介紹如名，鼠標選中文件或者文件夾，點擊鼠標中鍵激活插件即可將文件文件夾名稱復制到剪切板。 ...

remcarpediem 2021-09-02 15:41 評論0 收藏0
超好用的谷歌瀏覽器、Sublime Text、Phpstorm、油猴插件合集

摘要：分享一些超好用插件，打造一個不一樣的瀏覽器編輯器。一谷歌瀏覽器插件谷歌訪問助手強烈推薦一鍵安裝，無需其他配置，即可訪問谷歌。谷歌瀏覽器是很耗內存的，該插件會自動掛起長時間未使用的網頁，來釋放系統資源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一個不一樣的 GitHub、瀏覽器、...

Rango 2019-08-22 15:45 評論0 收藏0
復制粘貼有那么麻煩嗎？理解VIM的文本復制

摘要：反過來，在的模式下，按命令開始選擇一段文本，然后按下，就把文字復制到系統的剪切板了，隨便找個文本編輯器如，按，就會發現剛才復制的內容粘貼出來了。 Vim的文本復制，邏輯上要比我們日常的拷貝、粘貼要復雜些。之前看了很多文章，真是太復雜了，復制個東西搞得好像系統性的工程建設一樣。其實兩句話就解釋明白的。參考這篇文章：vim的剪切板首先輸入:reg命令，查看Vim記錄的所有剪切板內容，大...

JowayYoung 2019-06-28 10:30 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 評論0 收藏0