How to copy a text from to clipboard?

Question

I have this form:

<table>
  <tr>
    <th>
      Attribute
    </th>
    <th>
      Cluster
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" id="attributeZigbee">
    </td>
    <td>
      <input type="text" id="clusterZigbee">
      <input id="attributeBt" type="button" onclick="getAttributeClusterZigbee()" value="Ok">
    </td>
  </tr>
  <tr>
    <td colspan="2" class="result">
      <output id="attributeClusterDesc"></output>
    </td>
  </tr>
</table>
<button onclick="copyOutputZigBee()">Copy</button>
<br>

This form gives me a certain result thanks to the function:

    var att = 0;
    var clu = 0;
    function getAttributeClusterZigbee() {
      att = document.getElementById("attributeZigbee").value;
      clu = document.getElementById("clusterZigbee").value;
      if (att == 0) {
        document.getElementById("attributeClusterDesc").innerHTML = "Please fill the <b>Attribute</b> field";
      } else if (att != 0 && clu == 0) {
        document.getElementById("attributeClusterDesc").innerHTML =
          "<br>zclPayload.attributeId_attribute_id_0 == " + att + " || <br> zclPayload.attributeId_attribute_id_1 == " + att + " || <br> zclPayload.attributeId_attribute_id_2 == " + att + " || <br> zclPayload.attributeId_attribute_id_3 == " + att + "|| <br> zclPayload.attributeId_attribute_id_4 == " + att + "||<br> zclPayload.attributeId_attribute_id_5 == " + att + "|| <br> zclPayload.attributeId_attribute_id_6 == " + att + " || <br> zclPayload.attributeId_attribute_id_7 == " + att + " || <br> zclPayload.attributeId_attribute_id_8 == " + att + " || <br> zclPayload.attributeId_attribute_id_9 == " + att + "|| <br> zclPayload.attributeId_attribute_id_10 == " + att + "|| <br> zclPayload.attributeId_attribute_id_11 == " + att + " || <br> zclPayload.attributeId_attribute_id_12 == " + att + " ||<br> zclPayload.attributeId_attribute_id_13 == " + att + " || <br> zclPayload.attributeId_attribute_id_14 == " + att + " || <br> zclPayload.attributeId_attribute_id_15 == " + att + " || <br> zclPayload.attributeId_attribute_id_16 == " + att + " || <br> zclPayload.attributeId_attribute_id_17 == " + att + " || <br>zclPayload.attributeId_attribute_id_18 == " + att + " || <br>zclPayload.attributeId_attribute_id_19 ==" + att + " "
      } else if (att != 0 && clu != 0) {
        document.getElementById("attributeClusterDesc").innerHTML =
          "<br>(zclPayload.attributeId_attribute_id_0 == " + att + " || <br> zclPayload.attributeId_attribute_id_1 == " + att + " || <br> zclPayload.attributeId_attribute_id_2 == " + att + " || <br> zclPayload.attributeId_attribute_id_3 == " + att + "|| <br> zclPayload.attributeId_attribute_id_4 == " + att + "||<br> zclPayload.attributeId_attribute_id_5 == " + att + "|| <br> zclPayload.attributeId_attribute_id_6 == " + att + " || <br> zclPayload.attributeId_attribute_id_7 == " + att + " || <br> zclPayload.attributeId_attribute_id_8 == " + att + " || <br> zclPayload.attributeId_attribute_id_9 == " + att + "|| <br> zclPayload.attributeId_attribute_id_10 == " + att + "|| <br> zclPayload.attributeId_attribute_id_11 == " + att + " || <br> zclPayload.attributeId_attribute_id_12 == " + att + " ||<br> zclPayload.attributeId_attribute_id_13 == " + att + " || <br> zclPayload.attributeId_attribute_id_14 == " + att + " || <br> zclPayload.attributeId_attribute_id_15 == " + att + " || <br> zclPayload.attributeId_attribute_id_16 == " + att + " || <br> zclPayload.attributeId_attribute_id_17 == " + att + " || <br>zclPayload.attributeId_attribute_id_18 == " + att + " || <br>zclPayload.attributeId_attribute_id_19 == " + att + ")<br>&& zigbeeApplicationSupport.clusterIdV2 ==" + clu + "";
      }
    }

The result is displayed in the output tag and i want to be able to copy that content to clip board after i get the result....

this is what i tried

function copyOutputZigBee(){
    var copyText = document.getElementById("attributeClusterDesc").value;
    document.getElementById("attributeClusterDescHidden").value=copyText;
    copyText=document.getElementById("attributeClusterDescHidden");
    copyText.select();
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);
}

Possible duplicate of [Copy output of a JavaScript variable to the clipboard](https://stackoverflow.com/questions/33855641/copy-output-of-a-javascript-variable-to-the-clipboard) — nircraft, Sep 19 '19 at 16:24
what went wrong exactly when you tried? If you think it's not a duplicate you'll need to be clearer about why. — ADyson, Sep 19 '19 at 16:47
@ADyson i dunno im tired, i dont quite getted what are they trying to do in there, a lot of information in there, but i updated what i tried maybe you can tell me what went wrong on what i tried, i will read with more attention tomorow that post — LeonelAmaral14, Sep 19 '19 at 16:58
"you can tell me" ...no, _you_ can tell _us_ what went wrong. Did you get an error? Some unexpected behaviour? We can't run the code in your environment to know that. — ADyson, Sep 19 '19 at 17:00
output element doesn't have any select function with its API, so have to do some kind of hack, I tried one and which is working fine. Please have a look and let me know if any help required — Dupinder Singh, Sep 19 '19 at 17:30
@ADyson this is the error i get : copyText.select is not a function — LeonelAmaral14, Sep 20 '19 at 08:52

score 1 · Accepted Answer · answered Sep 19 '19 at 17:28

Try this solution, or hack, hack because of Output element do not have a select function, So what we did we copied the output value from output element to a hidden input element and then assign the value from hidden input element to the clipboard

So this will help!

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Copy output text</button>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output id="myInput" name="x" for="a b"></output>
<input type="hidden" id="dummyMyInput" />
</form>

<script>
function myFunction() { debugger;
  var copyText = document.getElementById("myInput").value;
  document.getElementById("dummyMyInput").value = copyText;
  copyText = document.getElementById("dummyMyInput");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

</body>
</html>

TO run the example you have to slide the slide bar. Slide bar will give a value which will be added to other value to produce output

`copyText.select` is not a function if you are trying to get the value from `Output` element. — Dupinder Singh, Sep 20 '19 at 17:29

score 0 · Answer 2 · answered Sep 20 '19 at 09:45

0

I did it! all i had to do was replacing the output tag with a textarea tag!

answered Sep 20 '19 at 09:45

LeonelAmaral14

99
1
8

How to copy a text from to clipboard?

2 Answers2