我遇到了类似的问题，并通过以下步骤得到了解决方案：1）创建一个临时输入元素并将值添加到其中：var $temp_input = $("<input value='" + valueToCopy + "'>"); 2）将元素附加到模态弹出窗口$("#ModalPopup").append($temp_input); 3）设置焦点并选择字段：$temp_input.focus(); $temp_input.select(); 4）使用document.execCommand("copy") 5）删除临时元素$temp_input.remove();

我试过了所有可能的情况，但没有一个成功。所以我没有使用剪贴板，而是做了一些js的技巧。
1.首先选择要复制的文本。
document.querySelector('#txtCopy').select();
但是这段代码只有在你的元素是textbox的时候才有效。那么如何选择，如果你想选择div或span等内部的内容。你可以使用下面的函数来实现这一点--

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

1.现在我们需要复制选定的文本-
document.execCommand('copy');
现在您可以看到文本已复制。
有时您需要在复制后取消选择所有文本。在这种情况下-您可以使用下面的功能来取消选择-

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

希望这对你有用。

我在场外面对这个问题。使用data-container属性，您可以在不更改JS的情况下更改容器元素。您可以为各种复制按钮定义各种容器元素。这是我创建ClipboardJS对象的解决方案：

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

在按钮html中添加data-container属性。

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

我遇到了同样的问题，我解决了这个问题，在模态中追加了元素，而不是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

你得把容器

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

请参阅本页https://clipboardjs.com/的高级用法部分。

试试这个叉子：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')
});

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