Copy Multiple Input Values to Clipboard using JavaScript

Question

In my code I have 3 input fields. I would like to to copy the values in these input fields to my clipboard seperated by a underscore.

Example: Red_Blue_Black

The issue is, my code only copies one of the inputs and I dont know how to separate the values with a underscore when I copy it.

<!DOCTYPE html>
<html>
    <body>

    <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

    <input type="text" value="Red" id="myInput">
    <input type="text" value="Blue" id="myInput2">
    <input type="text" value="Black" id="myInput3">

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

    <p>The document.execCommand() method is not supported in IE8 and earlier.</p>

    <script>
    function myFunction() {
      var copyText = document.getElementById("myInput");
      var copyText2 = document.getElementById("myInput2");
      var copyText2 = document.getElementById("myInput3");
      copyText.select();
      copyText2.select();
      copyText3.select();
      document.execCommand("copy");

    }
    </script>

    </body>
</html>

looks like this is not possible, as you can only copy to clipbord what is currently selected. There could be a workaround in writing into a hidden input, select that and copy then. — Jeff
– Jeff, Commented Oct 3, 2018 at 0:13
Each .select() effectively unselects the previous selection. Get the values in each element like copyText.value + "_" + copy...(etc) then use techniques such as those discussed in "How do I copy to the clipboard in JavaScript?" — Stephen P
– Stephen P, Commented Oct 3, 2018 at 0:18
Possible duplicate of How do I copy to the clipboard in JavaScript? — Jeff
– Jeff, Commented Oct 3, 2018 at 0:28

Jeff · Accepted Answer · 2018-10-03 00:25:19Z

3

Looks like this is not possible straight foreward, as you can only copy to clipbord what is currently selected. There is a workaround in writing into a hidden input, select that and copy then:

<input type="text" value="Red" id="myInput">
<input type="text" value="Blue" id="myInput2">
<input type="text" value="Black" id="myInput3">
<input type="text" value="" id="output">
<button onclick="myFunction()">Copy text</button>
<script>
    function myFunction() {
      var copyText = document.getElementById("myInput");
      var copyText2 = document.getElementById("myInput2");
      var copyText3 = document.getElementById("myInput3");
      var output = document.getElementById("output");
      output.value = copyText.value + "_" + copyText2.value + "_" + copyText3.value;
      output.select();
      document.execCommand("copy");

    }
</script>

A fiddle

EDIT: I did the test before I made the output-input hidden. It doesn't work with hidden inputs. Use the answers in How do I copy to the clipboard in JavaScript?

edited Oct 3, 2018 at 0:25

answered Oct 3, 2018 at 0:18

Jeff

6,9611 gold badge19 silver badges34 bronze badges

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

5 Comments

Stephen P Over a year ago

How about making a stack-snippet here instead of (or in addition to) your fiddle?

taji01 Over a year ago

I tested it and the values are not being saved to the clipboard

Jeff Over a year ago

true. I tested it before I made the input hidden.... doesn't work with hidden inputs unfortunately

Stephen P Over a year ago

Even better - you don't have to include that extra input field in the HTML; you can have your javascript create one (I most often see textarea used, not input) var output = document.createElement('textarea'); Make it transparent, position it offscreen, similar to hiding something but leaving it available for screen-reader accessibility software.

Nancy Over a year ago

Can u help me with this question? stackoverflow.com/questions/53374846/…

taji01 · Accepted Answer · 2018-10-03 00:32:18Z

Building on Jeff's answer, I hide the input field so it "appears to be a hidden field". I did that because it looks like you can’t select and get the value of the hidden field.

.txt-invisible {
    border: none;
    width: 0px;
    height: 0px;
    color: transparent;
}

    .txt-invisible:focus {
        outline: none;
    }

    <input type="text" value="Red" id="myInput">
    <input type="text" value="Blue" id="myInput2">
    <input type="text" value="Black" id="myInput3">
    <input type="text" value="" id="output" class="txt-invisible">
    <button onclick="myFunction()">Copy text</button>
<script>
    function myFunction() {
      var copyText = document.getElementById("myInput");
      var copyText2 = document.getElementById("myInput2");
      var copyText3 = document.getElementById("myInput3");
      var output = document.getElementById("output");
      output.value = copyText.value + "_" + copyText2.value + "_" + copyText3.value;
			output.select();
      document.execCommand("copy");

    }
</script>

Collectives™ on Stack Overflow

Copy Multiple Input Values to Clipboard using JavaScript

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related