How to paste data from clipboard to multiple input fields?

Question

How can I execute copy to clipboard with many inputs? I have this code

HTML CODE

<input type="text" value="Hello" id="myInput1">
<input type="text" value="World" id="myInput2">

<button onclick="myFunction()">Copy text</button>

SCRIPT CODE

<script>
function myFunction() {
  var copyText1 = document.getElementById("myInput1");
  var copyText2 = document.getElementById("myInput1");
  copyText1.select();
  copyText1.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

How do you want to save these in the clipboard? Like, `myInput1myInput2` ? — N3R4ZZuRR0, Sep 29 '19 at 04:03
@VermaJr. If possible, can I have it in this format: "Description1: " myInput1 "Description2: " myInput2 Those with quotation marks are static, and each should be in new line. — Dan Villanueva, Sep 29 '19 at 04:08

N3R4ZZuRR0 · Accepted Answer · 2021-08-25T13:01:23.350

You can add a third input field (or a textarea if you also want to add a newline character) and simply hide it. And, just before executing the text select and copy commands, unhide the textarea and then again hide it.

function myFunction() {
    var copyText1 = document.getElementById("myInput1");
    var copyText2 = document.getElementById("myInput2");
    var hiddenInput = document.getElementById("hiddenInput");
    hiddenInput.value = "Description1: " + copyText1.value + "\nDescription2: " + copyText2.value;
    hiddenInput.style.display = "";
    hiddenInput.select();
    hiddenInput.setSelectionRange(0, 99999);
    document.execCommand("copy");
    hiddenInput.style.display = "none";
    alert("Copied the text:\n" + hiddenInput.value);
}

<input type="text" value="Hello" id="myInput1">
<input type="text" value="World" id="myInput2">
<textarea id="hiddenInput" style="display:none;"></textarea>
    
<button onclick="myFunction()">Copy text</button>

Working even if I need to hard code all @_@. Thank you – Dan Villanueva Sep 29 '19 at 07:13 — Dan Villanueva, Sep 29 '19 at 07:13

Mister Jojo · Answer 2 · 2019-09-29T22:56:15.580

0

maybe this one ?
for more clipboard usage info => https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#Using_the_Clipboard_API

btCopy.onclick=_=>
  {
  // step 1: collect the input values (a method like so many others)
  let inputs = {}
  Array.from(new FormData(myForm),entry=>{inputs[ entry[0] ] = entry[1]})
  let All_inputs = JSON.stringify(inputs)

  // step 2 : write All_inputs into the clipboard
  navigator.clipboard.writeText(All_inputs)

  // as in your wishes...
  alert('Copied the text: ' + All_inputs)
  }

<form id="myForm">
  <input type="text" name="Description1" value="Hello">
  <input type="text" name="Description2" value="world">
</form>

<button id="btCopy">copy</button>

edited Sep 29 '19 at 22:56

answered Sep 29 '19 at 04:37

Mister Jojo

20,093
6
21
40

If you provide an explanation you'll likely get upvotes and accepts. And don't use the old way assuming an `id` exists as a variable, it is bad practice. – Asons Sep 29 '19 at 07:12
@LGSon You confuse what you call bad practice is just an opinion. In any case, Using names or IDs for elements has no incident for that code. For the record : I always use names for form elements family, because they are the ones used for serialization functions, not the IDs. – Mister Jojo Sep 29 '19 at 13:03
Then you might want to read this: https://stackoverflow.com/a/19776647/2827823 ... and instead of take up on what is common known, you go against it. Another is this: https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick – Asons Sep 29 '19 at 14:03
1

Given that future users are supposed to learn from answers here, the most appropriate gets upvoted, other ones not, and I think you would want the same when you move into unknown areas of coding (get the more appropriate one's). – Asons Sep 29 '19 at 14:10
@LGSon and you should read this : https://javascript.info/introduction-browser-events#addeventlistener – Mister Jojo Sep 29 '19 at 14:33
1

Based on your link, it is clear you didn't read mine, so I'll rest my case. – Asons Sep 29 '19 at 14:39

How to paste data from clipboard to multiple input fields?

2 Answers2