javascript - 在 Bootstrap 模式中调用时，工作 "Copy to Clipboard"函数不起作用

Question

目标:将 Bootstrap 模式中的文本复制到剪贴板。

JS:

$(document).ready(function(){
  $(document).on('click','#copy-btn', function(){

        // var value = $('#error-message').html();

        // using a static value, just to eliminate any question
        // about what should be copied.
        copytext('kilroy tested this');  

    })
});

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
    console.log('should have copied ' + text); // but it refuses to do so when a modal is used!
}

这有效:

当我在没有 Bootstrap 模式弹出窗口的情况下尝试此操作时，kilroy tested this被复制到我的剪贴板:

<button type="button" class="btn btn-success" id="copy-btn">Copy</button>

这不是:

但是...当我移动 <button>进入模式，没有任何内容被复制到剪贴板，即使控制台报告“should have copied kilroy tested this”。

<!-- AJAX Error Popup -->
<div class="modal fade" id="ajax-error" tabindex="-1" role="dialog" aria-labelledby="errorModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header modal-header-danger">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="errorModal">Error Detected!</h4>
      </div>

      <div class="modal-body" id="error-message"><!-- AJAX message inserted here --></div>

      <div class="modal-footer">

        <button type="button" class="btn btn-success" id="copy-btn">Copy</button>

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

---

我不知道用任何其他方法来解决这个问题——

• 我已经证明 copytext()功能正常，
• 我已经消除了关于应该复制的内容来源的任何问题，并且
• 我已经证明了 copy-btn单击按钮时被调用( copytext() 被调用并记录到控制台)。

唯一剩下的就是关于 Bootstrap 模式的一些奇怪之处。

使用 jquery 2.1.1 和 bootstrap 3.3.6

对任何想法或解决方法持开放态度:)

Answer 1

document.execCommand('复制');功能取决于可信事件。如果需要信任事件，则目标元素也应该有适当的焦点。

尝试将焦点设置在 textElement 上，并在将其从文本元素中移除后将其设置为模态。这应该可以解决问题

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    textField.focus(); //SET FOCUS on the TEXTFIELD
    document.execCommand('copy');
    textField.remove();
    console.log('should have copied ' + text); 
    ajax-error.focus(); //SET FOCUS BACK to MODAL
}