如何使用JS复制文本并粘贴到textarea?

问题描述 投票:2回答:3

我正在寻找一种解决方案如何复制文本,然后在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中。

javascript html
3个回答
1
投票

每次运行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>

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属性更改它...


1
投票

我有一个简单的解决方案,只需使用您拥有的代码部分。

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>
© www.soinside.com 2019 - 2024. All rights reserved.