1

I have function that copy a text to my clipboard, when i'm using a button for using this function with onclick() it's works just fine,
The problem starts when i'm using onchange() on the select it's doesn't works at all.


javascript 

function copyText(text) {
  let copyfrom = document.createElement("textarea");
  document.body.appendChild(copyfrom);
  copyfrom.textContent = text
  copyfrom.select();
  document.execCommand("copy");
  copyfrom.remove()
 }



    document.getElementById('copy').onclick = function() {
  copyText("Hello world");
}


document.getElementById('idToChoose').onchange = function() {
  copyText("Hello world");}

HTML

 <div class='modal fade' id='myModal' role='dialog'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-header'><button type='button' class='close' data-dismiss='modal'>&times;</button>
                <h4 class='modal-title'>formats</h4>
            </div>
            <div class='modal-body'>
            <select class='form-control' id='idToChoose'>
            <option value='gradle'>gradle</option>
            <option value='ivy'>ivy</option>
            <option value='maven'>maven</option>
          </select>
                <button id='copy' type='button' class='btn btn-error' data-dismiss='modal'>copy</button>
            </div>
            <div class='modal-footer'>
                <button type='button' class='btn btn-default' data-dismiss='modal'>close</button></div>
        </div>
    </div>
</div>
Daniel Taub
  • 5,133
  • 7
  • 42
  • 72

3 Answers3

2

This

document.getElementsByTagName('idToChoose')

Should be changed to

document.querySelector('#idToChoose')
quirimmo
  • 9,800
  • 3
  • 30
  • 45
  • I've changed , but it still don't works, the problem is something with the onchange() function – Daniel Taub May 14 '17 at 19:08
  • If you changed in this way this is still wrong: document.getElementById('idToChoose')('idToChoose') This should be: document.getElementById('idToChoose') – quirimmo May 14 '17 at 19:11
  • what do you mean works, it's supposed to copy the text to the clipboard and it's not working... – Daniel Taub May 14 '17 at 19:29
  • it copies the text you pass in the function onchange. It does. If you try to paste it it will paste hello world correctly. – quirimmo May 14 '17 at 19:31
  • Tried from different devices and browsers still not working – Daniel Taub May 15 '17 at 07:30
  • Open the jsfiddle. Change the value in the select. Paste in notepad. You see the hello world. Is this not happening to you? Which browser are you using? – quirimmo May 15 '17 at 08:28
2

Replace

document.getElementsByTagName('idToChoose')

with

document.getElementsByTagName('select')

or

document.getElementById('idToChoose')

getElementsByTagName does not work with id values. You have to use the tag. Also, id is always unique, which is why getElementById returns only one element.

inarilo
  • 804
  • 1
  • 9
  • 14
1

The following code takes the liberty of simplifying the OP's HTML to focus on getting a value from a dropdown box selection into the clipboard.

HTML:

<select>
  <option value="*">Please choose one</option>
    <option value="gradle">gradle</option>
          <option value="ivy">ivy</option>
          <option value="maven">maven</option>
          </select>

The following JavaScript as a result is simplified as well:

var d = document;
var val = str = "";
var s = d.getElementsByTagName("select")[0];
s.onchange = function() {
  val = s.options[s.selectedIndex].value;
  if (val == "") {
    return;
  }
    else
    {
   str = "Hello " + val;
   copyText(str);
    } 
};

function copyText( text ) {
    var textArea = d.createElement("textarea");

    d.body.appendChild( textArea );

    textArea.textContent = text;
    textArea.select();

    d.execCommand("copy");  

    textArea.remove();
}

See demo

On manually pasting from the clipboard after selecting each option, the output:

Hello gradle
Hello ivy
Hello maven

While this example code runs fine on GoogleChrome (versions 43+), apparently it is not supported by all of the primary browsers. See MDN which states:

copy
Copies the current selection to the clipboard. Conditions of 
having this behavior enabled vary from one browser to another,
and have evolved over time. Check the compatibility table to 
determine if you can use it in your case.
slevy1
  • 3,797
  • 2
  • 27
  • 33
  • not working, the problem is to exec in onchange i think – Daniel Taub May 14 '17 at 20:05
  • @Daniel Taub: Please see my revised code and the quote from the MDN. – slevy1 May 15 '17 at 00:47
  • Note that the onchange event attribute becomes viable because I added a "Please choose one" option before the the three format types. So, when the user selects any of those three options, an onchange event occurs for the dropdown box. – slevy1 May 15 '17 at 08:05
  • 1
    Yes, it does. Try modifying your HTML and have a "Please Choose" option. Then when you select one of the format options it should work for you, too. Here's a "fiddle" that demos that point: https://jsfiddle.net/L9f5j9v8/9/ – slevy1 May 15 '17 at 08:15
  • The onchange works , but the exec option not working – Daniel Taub May 15 '17 at 08:30
  • It's shows that copy should work for me , but it doesn't – Daniel Taub May 15 '17 at 10:02
  • Here's something else that may help: http://stackoverflow.com/questions/33321095/cannot-use-document-execcommandcopy-from-developer-console – slevy1 May 15 '17 at 10:05