CODEWITHSUNDEEP
javascripthtml
taji01
taji01

Reputation: 2615

Copy Multiple Input Values to Clipboard using JavaScript

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>

Upvotes: 0

Views: 4939

Answers (2)

taji01
taji01

Reputation: 2615

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>

Upvotes: 0

Jeff
Jeff

Reputation: 6953

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?

Upvotes: 3

Related Questions