如何使用JS復制文本並將其粘貼到textarea中？

Question

我正在尋找一種解決方案，該方法如何復制文本，然后在textarea中自動粘貼新文本。 我找到了解決方案，但是基於jquery，我正在尋找關於干凈js的簡單內容。

 function copyToClipboard(elementId) { // Create a "hidden" input var aux = document.createElement("input"); // Assign it the value of the specified element aux.setAttribute("value", document.getElementById(elementId).innerHTML); // Append it to the body document.body.appendChild(aux); // Highlight its content aux.select(); // Copy the highlighted text document.execCommand("copy"); // Remove it from the body document.body.removeChild(aux); let textarea = document.getElementById("select-this"); textarea.focus(); } 

 <div class="wrapper"> <p id="p1">P1: I am paragraph 1</p> <p id="p2">P2: I am a second paragraph</p> <p id="p3">P3: I am a 3 paragraph</p> <button onclick="copyToClipboard('p1')">Copy P1</button> <button onclick="copyToClipboard('p2')">Copy P2</button> <button onclick="copyToClipboard('p3')">Copy P3</button> <br/><br/> <textarea id="select-this" value="I just copied this with only JavaScript"/></textarea> </div> 

我找到了一些解決方案，但是我仍然不知道如何在按下按鈕后使文本自動出現在textarea中。

Answer 1

嗯...你真的太復雜了...

只需使用以下JS：

 let textarea = document.getElementById("select-this"); textarea.focus(); function changeTextarea(elementId) { textarea.innerHTML = document.body.querySelector(elementId).innerHTML; } 

並按如下所示編輯按鈕的HTML：

 <button onclick="changeTextarea('#p1')">Copy P1</button> <button onclick="changeTextarea('#p2')">Copy P2</button> <button onclick="changeTextarea('#p3')">Copy P3</button> 

您無需復制然后將段落的值粘貼到<textarea> 。 只需使用innerHTML屬性對其進行更改...

Answer 2

每次運行copyToClipboard時，將復制的值附加到textarea的值

 function copyToClipboard(elementId) { // Create a "hidden" input var aux = document.createElement("input"); // Assign it the value of the specified element aux.setAttribute("value", document.getElementById(elementId).innerHTML); // Append it to the body document.body.appendChild(aux); // Highlight its content aux.select(); // Copy the highlighted text document.execCommand("copy"); // Remove it from the body document.body.removeChild(aux); let textarea = document.getElementById("select-this"); textarea.focus(); textarea.value += document.getElementById(elementId).innerHTML } 

 <div class="wrapper"> <p id="p1">P1: I am paragraph 1</p> <p id="p2">P2: I am a second paragraph</p> <p id="p3">P3: I am a 3 paragraph</p> <button onclick="copyToClipboard('p1')">Copy P1</button> <button onclick="copyToClipboard('p2')">Copy P2</button> <button onclick="copyToClipboard('p3')">Copy P3</button> <br/><br/> <textarea id="select-this" value="I just copied this with only JavaScript"/></textarea> </div> 

Answer 3

為此，我有一個簡單的解決方案，只需使用部分代碼即可。

 function copyToClipboard(elementId) { var text = document.getElementById(elementId).innerHTML; let textarea = document.getElementById("select-this"); textarea.innerHTML = text; textarea.focus(); } 

  <p id="p1">P1: I am paragraph 1</p> <p id="p2">P2: I am a second paragraph</p> <p id="p3">P3: I am a 3 paragraph</p> <button onclick="copyToClipboard('p1')">Copy P1</button> <button onclick="copyToClipboard('p2')">Copy P2</button> <button onclick="copyToClipboard('p3')">Copy P3</button> <br><br> <textarea id="select-this" value="I just copied this with only JavaScript"/></textarea> </div>