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:

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?

An issue was logged regarding incompatibilities with bootstrap modals https://github.com/zenorocha/clipboard.js/issues/155 — Peter Chaula, Apr 28 '17 at 11:49

score 8 · Answer 1 · answered May 18 '18 at 14:30

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

score 8 · Answer 2 · answered May 07 '20 at 21:58

8

You have to set the container

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

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

answered May 07 '20 at 21:58

Erick Eduardo Garcia

1,147
13
17

This was Nooice – Tyler Rafferty Mar 14 '22 at 04:48

score 7 · Accepted Answer · answered Nov 10 '16 at 11:32

7

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')
});

answered Nov 10 '16 at 11:32

marcinrek

339
1
8

Well you overcomplicated this a bit - what I did was just to use the basic example from the clipboard.js docs :) – marcinrek Nov 10 '16 at 11:39
With the latest build use "var clipboard = new ClipboardJS('#copy')" instead. – davykiash Mar 26 '18 at 11:06

score 4 · Answer 4 · answered Jul 19 '18 at 09:29

4

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() {};

answered Jul 19 '18 at 09:29

Yifan

1,185
12
18

You could benefit from adding comments as to why this method should be used and any other information. I will upvote once you provide a reasonable explanation, not just the answer. – Tyler Rafferty Mar 14 '22 at 04:46

score 2 · Answer 5 · answered May 22 '19 at 10:35

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(); 4) use document.execCommand("copy") 5) remove the temporary element $temp_input.remove();

score 1 · Answer 6 · answered Jun 03 '18 at 13:24

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

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();
  }
}

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.

score 0 · Answer 7 · answered Jun 10 '23 at 14:40

I face this problem in offcanvas. With data-container attribute you can change container element without changing JS. You can define various container elements for various copy buttons. This is my solution for creating ClipboardJS object:

$("[data-clipboard=true]").each(function(i, el){
   let element = $(el);
   new ClipboardJS(el, {
       container: element.data("container") ?(element.data("container"))[0] : null
   }).on('success', function(e) {
      e.clearSelection();
      alert("Copied")
   });

In your button html add data-container attribute.

<button class="btn btn-sm btn-light-primary" data-container="#placeholdersOffcanvas" data-clipboard="true" data-clipboard-text="Text to copy">
    <i class="fa fa-copy"></i>
</button>

Clipboard.js not working in Bootstrap modal

7 Answers7