4

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>
Improve this question
2
  • How do you want to save these in the clipboard? Like, myInput1myInput2 ? Commented Sep 29, 2019 at 4: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. Commented Sep 29, 2019 at 4:08

2 Answers 2

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Working even if I need to hard code all @_@. Thank you
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>

Improve this answer

6 Comments

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.
@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.
Then you might want to read this: stackoverflow.com/a/19776647/2827823 ... and instead of take up on what is common known, you go against it. Another is this: stackoverflow.com/questions/6348494/addeventlistener-vs-onclick
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).
Based on your link, it is clear you didn't read mine, so I'll rest my case.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.