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

试试这个 fork： 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 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

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

引导程序 3

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

引导程序 4

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

Answer 4

你必须设置容器

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

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

Answer 5

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

Answer 6

我已经尝试了所有可能的情况，但都没有奏效。 所以我没有使用剪贴板，而是做了一些 js 技巧。

1. 首先选择要复制的文本。

   document.querySelector('#txtCopy').select();

但只有当您的元素是文本框时，此代码才有效。 那么如何选择是否要在 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();
  }
}

2. 现在我们需要复制选定的文本 -

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

希望这对你有用。