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

我遇到了同样的问题，我解决了这个附加元素而不是 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);
}

出于可访问性 (enforceFocus) 的原因，Bootstrap 的模式强制执行焦点，但这会导致许多第三方库出现问题

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