我正在寻找一种解决方案如何复制文本,然后在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中。
每次运行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>
嗯......你真的过于复杂了......
只需使用以下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
属性更改它...
我有一个简单的解决方案,只需使用您拥有的代码部分。
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>