如何将剪贴板数据粘贴至多个输入框？如何实现多输入框内容复制到剪贴板？

Hey there! Let's tackle your two questions one by one, and fix up that code you shared along the way.

There are two common scenarios here—either you want to paste the same content into all inputs, or split the clipboard content and assign parts to each input. Here's how to do both:

Scenario 1: Paste identical content into all inputs #

This listens for the paste event, grabs the clipboard text, and sets it to every target input:

<input type="text" id="input1" placeholder="Input 1">
<input type="text" id="input2" placeholder="Input 2">

<script>
document.addEventListener('paste', function(e) {
  // Get the text from clipboard
  const clipboardContent = e.clipboardData || window.clipboardData;
  const pastedText = clipboardContent.getData('text');
  
  // Assign to multiple inputs
  document.getElementById('input1').value = pastedText;
  document.getElementById('input2').value = pastedText;
});
</script>

Scenario 2: Split clipboard content across inputs #

If your clipboard text uses a separator (like spaces, commas, or newlines), you can split it and assign each part to a different input:

<input type="text" id="input1" placeholder="First part">
<input type="text" id="input2" placeholder="Second part">

<script>
document.addEventListener('paste', function(e) {
  e.preventDefault(); // Stop default paste behavior
  const clipboardContent = e.clipboardData || window.clipboardData;
  const pastedText = clipboardContent.getData('text');
  
  // Split by space (adjust separator to match your use case)
  const textParts = pastedText.split(' ');
  
  // Assign parts to inputs if available
  if (textParts.length >= 1) document.getElementById('input1').value = textParts[0];
  if (textParts.length >= 2) document.getElementById('input2').value = textParts[1];
});
</script>

First, let's fix the bugs in your original code:

• You accidentally targeted myInput1 twice instead of myInput2
• The alert uses an undefined copyText variable
• Using a temporary textarea is a more reliable way to copy combined text (works better across devices)

Here's the corrected, working version:

<input type="text" value="Hello" id="myInput1">
<input type="text" value="World" id="myInput2">
<button onclick="myFunction()">Copy text</button>

<script>
function myFunction() {
  // Grab values from both inputs
  const input1Value = document.getElementById("myInput1").value;
  const input2Value = document.getElementById("myInput2").value;
  
  // Combine the values (customize the separator: space, newline, comma, etc.)
  const combinedText = `${input1Value} ${input2Value}`;
  
  // Create a hidden temporary textarea to hold the combined text
  const tempTextarea = document.createElement('textarea');
  tempTextarea.style.position = 'absolute';
  tempTextarea.style.left = '-9999px';
  tempTextarea.value = combinedText;
  document.body.appendChild(tempTextarea);
  
  // Select and copy the text
  tempTextarea.select();
  tempTextarea.setSelectionRange(0, 99999); // Fix for mobile devices
  document.execCommand("copy");
  
  // Clean up the temporary element
  document.body.removeChild(tempTextarea);
  
  // Show confirmation
  alert("Copied the text: " + combinedText);
}
</script>

Why use a temporary textarea? #

The document.execCommand("copy") method requires that the text being copied is selected from an editable element. While you can select individual inputs, combining multiple values into a single textarea makes the process smoother and more reliable across all browsers and devices.

内容的提问来源于stack exchange，提问作者Dan Villanueva