zoukankan      html  css  js  c++  java
  • js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令:

    //复制内容到粘贴板
    function copyToClipboard(elemId) {
        var target = document.getElementById(elemId);
        // 选择内容
        target.focus();
        target.setSelectionRange(0, target.value.length);
        // 复制内容
        var succeed;
        try {
            succeed = document.execCommand("copy");
        } catch (e) {
            succeed = false;
        }
        console.log("复制成功");
        return succeed;
    }

    如果应用场景复杂些,可能有多种元素(textarea、input、div等)需要复制内容,可以写一个通用方法:

    //复制内容到粘贴板
    function copyToClipboard(elemId) {
        var elem = document.getElementById(elemId);
        var targetId = "_hiddenCopyText_";
        var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
        var origSelectionStart, origSelectionEnd;
        if (isInput) {
            // 复制选择内容
            target = elem;
            origSelectionStart = elem.selectionStart;
            origSelectionEnd = elem.selectionEnd;
        } else {
            // 必须有一个临时的元素存储复制的内容
            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;
        }
        // 选择内容
        var currentFocus = document.activeElement;
        target.focus();
        target.setSelectionRange(0, target.value.length);
        // 复制内容
        var succeed;
        try {
            succeed = document.execCommand("copy");
        } catch (e) {
            succeed = false;
        }
        // 恢复焦点
        if (currentFocus && typeof currentFocus.focus === "function") {
            currentFocus.focus();
        }
        if (isInput) {
            // 恢复之前的选择
            elem.setSelectionRange(origSelectionStart, origSelectionEnd);
        } else {
            // 清除临时内容
            target.textContent = "";
        }
        console.log("复制成功");
        return succeed;
    }
  • 相关阅读:
    uva 489 Hangman Judge(水题)
    中国海洋大学第四届朗讯杯高级组 Cash Cow(模拟)
    中国海洋大学第四届朗讯杯高级组 A 2718 Rocky(模拟)
    poj 1039 Pipe(叉乘。。。)
    CodeForces 135 B. Rectangle and Square(判断正方形和 矩形)
    poj 1265 Area( pick 定理 )
    poj 2031 Building a Space Station(prime )
    hdu 4502 吉哥系列故事——临时工计划(dp)
    拉格朗日插值
    [USACO18DEC]The Cow Gathering P
  • 原文地址:https://www.cnblogs.com/yeqrblog/p/9964550.html
Copyright © 2011-2022 走看看