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, Oct 03 '18 at 00: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?](https://stackoverflow.com/q/400212/17300)" — Stephen P, Oct 03 '18 at 00:18
Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Jeff, Oct 03 '18 at 00:28

Jeff · Answer 1 · 2018-10-03T00:25:19.967

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 03 '18 at 00:25

answered Oct 03 '18 at 00:18

Jeff

6,807
1
13
31

How about making a stack-snippet here instead of (or in addition to) your fiddle? – Stephen P Oct 03 '18 at 00:20
I tested it and the values are not being saved to the clipboard – taji01 Oct 03 '18 at 00:22
true. I tested it before I made the input hidden.... doesn't work with hidden inputs unfortunately – Jeff Oct 03 '18 at 00:24
1

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. – Stephen P Oct 03 '18 at 00:46
Can u help me with this question? https://stackoverflow.com/questions/53374846/copy-to-clipboard-from-two-html-elements – Nancy Nov 20 '18 at 10:08

score 0 · Answer 2 · answered Oct 03 '18 at 00:32

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>

Copy Multiple Input Values to Clipboard using JavaScript

2 Answers2