油猴腳本: 快速複製文字到剪切板

緣由

因爲我太懶了, 不想每次在瀏覽器裏都要鼠標拖很長一串,而後在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地址

只須要雙擊想要複製的文字或者三連擊選中一長串數字就能夠複製到剪切板了.