javascript - 隐藏文本区域时无法复制到剪贴板

Question

我尝试了下面的代码，但是当 textarea 字段带有 css display:none 时它​​不起作用。

我从隐藏的文本区域复制文本，但是当我尝试复制时，它没有返回任何内容。只有当我删除 display:none css 时它才能正常工作。

我做错了什么或遗漏了什么？我该如何解决这个问题才能让它发挥作用。

document.getElementById("copyButton2").addEventListener("click", function() {
        copyToClipboardMsg(document.getElementById("copyTarget2"), "msg");
    });

    function copyToClipboardMsg(elem, msgElem) {
    	  var succeed = copyToClipboard(elem);   
    }
    
    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;
    }

<textarea id="copyTarget2" style="display:none">dsfsdg</textarea>
<button id="copyButton2">Copy</button>

Answer 1

如果您想隐藏元素，请使用 visibility:hidden 而不是 display:none。 display:none 删除元素。