油猴脚本: 快速复制文字到剪切板

springDevBird 发布于2019-08-23 17:12 / 1595人阅读

摘要：原因由于我太懒了不想每次在浏览器里都要鼠标拖很长一串然后在复制所以我想快速复制平时双击或三连击选文案的情况还是蛮多的所以就决定实现一个油猴的脚本这样就可以方便的玩耍了实现实现起来很简单选中时通过获取到选中的文字然后执行拷贝到剪切板中有一个判

原因

由于我太懒了, 不想每次在浏览器里都要鼠标拖很长一串,然后在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地址

只需要双击想要复制的文字或者三连击选中一长串数字就可以复制到剪切板了.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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