js复制内容进入粘贴板

Amio 发布于2019-08-19 18:00 / 3270人阅读

摘要：我们在前端开发时有时遇到这样的需求，同过直接把或者里的值复制到粘贴板里。这里提供一个方法实现这个功能，在你的项目里直接引入就行。我们可以这样直接调用这个方法这样为的值进入了粘贴板了。

我们在前端开发时有时遇到这样的需求，同过button直接把input 或者textarea里的值复制到粘贴板里。
这里提供一个方法实现这个功能，在你的项目里直接引入就行。

function copyToClipboard(elem) {
    // create hidden text element, if it doesn"t already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);

    // copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }

    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

我们可以这样直接调用这个方法：

copyToClipboard(document.getElementById("name"));

这样id为name的值进入了粘贴板了。

云服务器 GPU云服务器 js复制到粘贴板复制粘贴js代码 js手机复制粘贴功能 js复制到剪切板

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

转载请注明本文地址：https://www.ucloud.cn/yun/79075.html

前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

DevTalking 2019-08-02 11:11 评论0 收藏0
复制粘贴有那么麻烦吗？理解VIM的文本复制

摘要：反过来，在的模式下，按命令开始选择一段文本，然后按下，就把文字复制到系统的剪切板了，随便找个文本编辑器如，按，就会发现刚才复制的内容粘贴出来了。 Vim的文本复制，逻辑上要比我们日常的拷贝、粘贴要复杂些。之前看了很多文章，真是太复杂了，复制个东西搞得好像系统性的工程建设一样。其实两句话就解释明白的。参考这篇文章：vim的剪切板首先输入:reg命令，查看Vim记录的所有剪切板内容，大...

JowayYoung 2019-06-28 10:30 评论0 收藏0
js获取剪切板内容，js控制图片粘贴。

摘要：在用户执行粘贴操作的时候，能够获得剪切板的内容，本文讨论一下这个问题。目前只有支持获取剪切板中的图片数据。这么多的判断条件，基本可以确定通过剪切板过来的是粘贴的文件。在用户执行粘贴操作的时候，js能够获得剪切板的内容，本文讨论一下这个问题。目前只有Chrome支持获取剪切板中的图片数据。还好需要这个功能的产品目前只支持Chrome和Safari，一些Chrome的新特性是可以尽情使...

KaltZK 2019-08-19 17:22 评论0 收藏0