Clipboard.js not working in Bootstrap modal

Question

I am trying to copy an input value with Clipboard.js: https://clipboardjs.com/ . The input is located in a modal:

http://codepen.io/Deka87/pen/eBJOKY

new Clipboard('#copy', {
    text: function(trigger) {
        return $("#copy-input").val();
    }
});

While it works outside of the modal, it fails to work when the input and the copy button are located in a modal window. I tried to init the clipboard function after the modal window is open:

$(".modal").on("shown.bs.modal", function() {
  new Clipboard('#copy', {
      text: function(trigger) {
          return $("#copy-input").val();
      }
  });
});

However, it didn't solve the issue. Any ideas?

Answer 1

Try this fork: http://codepen.io/anon/pen/NbxWbQ I forgot to remove the console.log so just ignore that :)

<input type="text" class="form-control" id="copy-input" value="Copied successfully!"/>
    <br />
    <a href="#" id="copy" data-clipboard-target="#copy-input" class="btn btn-default">Copy input content to clipboard</a>

and

$(".modal").on("shown.bs.modal", function() {
  console.log('a', Clipboard, $('#copy'), $("#copy-input").val());
  var clipboard = new Clipboard('#copy')
});

Answer 2

I had the same problem, and I solved this appending the element inside the modal instead of document.body .

function copyToClipboard() {
   const el = document.createElement('textarea');
    el.value = 'text to copy';
    document.getElementById('copy').appendChild(el);
    el.select();
    document.execCommand('Copy');
    document.getElementById('copy').removeChild(el);
}

Bootstrap's modal enforce focus for accessibility ( enforceFocus )reasons but that causes problems with lots of third-party libraries

https://github.com/twbs/bootstrap/issues?q=is:issue+enforceFocus+is:closed

Answer 3

https://github.com/zenorocha/clipboard.js/issues/155#issuecomment-217372642

Bootstrap 3

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

Answer 4

You have to set the container

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

See this page https://clipboardjs.com/ in the Advanced Usage Section.

Answer 5

I faced similar issue and got the solution by following steps: 1) create a temporary input element and add the value to it: var $temp_input = $("<input value='" + valueToCopy + "'>"); 2) append the element to your modal popup $("#ModalPopup").append($temp_input); 3) set focus and select the field: $temp_input.focus(); $temp_input.select(); $temp_input.focus(); $temp_input.select(); 4) use document.execCommand("copy") 5) remove the temporary element $temp_input.remove();

Answer 6

I have tried all the possible cases but none of them worked. So instead of using clipboard i just did some js tricks.

1. first select the text which you want to copy.

   document.querySelector('#txtCopy').select();

but this code will work only if your element is textbox. So how to select if you want to select content inside div or span etc. Well you can use the below function to do that -

function selectText(element) {
  if (/INPUT|TEXTAREA/i.test(element.tagName)) {
    element.focus();
    if (element.setSelectionRange) {
      element.setSelectionRange(0, element.value.length);
    } else {
      element.select();
    }
    return;
  }

  if (window.getSelection) { // All browsers, except IE <=8
    window.getSelection().selectAllChildren(element);
  } else if (document.body.createTextRange) { // IE <=8
    var range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  }
}

2. Now we need to copy the selected text -

   document.execCommand('copy');

Now you can see that text is copied.

Sometimes you need to deSelect all the text after copying. In that case - you can use below function to deSelect -

function deselectAll() {
  var element = document.activeElement;

  if (element && /INPUT|TEXTAREA/i.test(element.tagName)) {
    if ('selectionStart' in element) {
      element.selectionEnd = element.selectionStart;
    }
    element.blur();
  }

  if (window.getSelection) { // All browsers, except IE <=8
    window.getSelection().removeAllRanges();
  } else if (document.selection) { // IE <=8
    document.selection.empty();
  }
}

Hope this works for you.