Clipboard.js在Bootstrap模式下不起作用

Question

我正在尝试使用Clipboard.js复制输入值：https : //clipboardjs.com/。输入位于模式中：

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

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

当它在模式之外运行时，当输入和复制按钮位于模式窗口中时，它将无法工作。我尝试在模式窗口打开后初始化剪贴板功能：

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

但是，它没有解决问题。有任何想法吗？

Answer 1

您必须设置容器

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

请参阅此页面https://clipboardjs.com/ 的“高级使用”部分。

Answer 2

我遇到了同样的问题，我解决了这个问题，将元素附加到模态而不是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 的模式强制聚焦于可访问性 ( enforceFocus) 原因，但这会导致许多第三方库出现问题

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

Answer 3

试试这个分支：http : //codepen.io/anon/pen/NbxWbQ 我忘记删除console.log了，所以忽略它:)

<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>

和

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

Answer 4

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

引导程序 3

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

引导程序 4

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