隐藏textarea字段时无法复制到剪贴板

Question

I tried the code below, but it doesn't works when the textarea field is with css display:none.

I copy text from hidden textarea field, but when i tried to copy, it returns nothing. It works fine only when i remove the display:none css.

Anything i made wrong or miss out? How can i solve this problem in order to make it works.

 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

If you want to hide an element use visibility:hidden instead of display:none . display:none removes the element.