CODEWITHSUNDEEP
javascriptjquerybootstrap-modal
user7128436
user7128436

Reputation:

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

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.

Upvotes: 3

Views: 6745

Answers (2)

Bill Kremer
Bill Kremer

Reputation: 116

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.

Upvotes: 8

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 6

Related Questions