javascript - Clipboard.js not working in Bootstrap modal - Stack Overflow

admin管理员组

文章数量:1181432

I am trying to copy an input value with Clipboard.js: /. 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?

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?

• javascript
• jquery
• twitter-bootstrap
• clipboard.js

Share Improve this question Follow asked Nov 10, 2016 at 11:11 sdvnksvsdvnksv 9,6681919 gold badges6262 silver badges118118 bronze badges 1

• An issue was logged regarding incompatibilities with bootstrap modals github.com/zenorocha/clipboard.js/issues/155 – Peter Chaula Commented Apr 28, 2017 at 11:49

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 9

You have to set the container

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

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

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

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

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

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

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.

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>

本文标签： javascriptClipboardjs not working in Bootstrap modalStack Overflow