Copy to clipboard action doesn't work when modal is open

Question

I'm having difficulties copying text when having modal-dialog open. My code for copying text (this refers to the button which has value that I want to copy):

var dummyLink = $(this).val();
var dummy = $('<input>').val(dummyLink).appendTo('body').select();
document.execCommand('copy');

This same method works on my page, but in modal-dialog fails - nothing is copied.

Answer 1

This line wont work when the element cannot get focus due to modal:

document.execCommand('copy');

You may consider to add an attribute to the button/element of your interest and on "hidden.bs.modal" event you can remove the added attribute and continue with your code.

An alternative approach can be based on appending your input directly to the bottom/body of your modal.

The snippet:

 $('#myModal button').on('click', function (e) { $(this).attr('dismissbutton', true); }); $('#myModal').on('hidden.bs.modal', function (e) { var buttonClicked = $(this).find('button[dismissbutton]'); buttonClicked.removeAttr('dismissbutton'); setTimeout(function() { var dummyLink = buttonClicked.text(); var dummy = $('<input/>').val(dummyLink).appendTo('body').select(); document.execCommand('copy'); }, 100); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button> </div> </div> </div> </div> 

Answer 2

If the element is focusable, you can force the focus using .focus()

var dummyLink = $(this).val();
var dummy = $('<input>').val(dummyLink).appendTo('body').select();
dummy.focus();
document.execCommand('copy');

Otherwise you can also try appending the element within the modal, for example: directly after the input, instead of the body. This prevents the element from not being focusable because it's in the background.