在bootstrap模式中调用时,工作"复制到剪贴板"功能不起作用

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

这个作品:

当我在没有引导模式弹出窗口的情况下尝试此操作时,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()正在调用并登录到控制台).

唯一剩下的就是引导模态的一些不足.

使用jquery 2.1.1和bootstrap 3.3.6

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

Answer 1

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

尝试将焦点设置在textElement上,并在从text元素中删除它后将其设置为模态.这应该可以解决问题

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
}

Answer 2

总之：作为模式具有tabindex="-1"的.focus()将只能在Chrome浏览器。对于跨浏览器解决方案，您必须将 textarea 作为 modal 的后代插入到 DOM 中。

关键是， textarea 必须document.activeElement是执行复制命令的时间。换句话说，它必须有focus。这可以通过调用.focus()它来实现，但是在您的特定情况下，单击事件发生在一个tabindex="-1"已经处于焦点的模式中。在撰写本文时，该.focus()方法仅适用于 Chrome。在其他浏览器中tabindex="-1"会阻止 textarea 获得焦点，除非它是模态的后代节点。

因此，下面的解决方案在它始终可以拥有焦点时创建 textarea，作为被单击元素的兄弟：

$(document).ready(function(){
    $(document).on('click', '#copy-btn', function(){
        copytext('dferenc tested this', this);  
    })
});

function copytext(text, context) {
    var textField = document.createElement('textarea');
    textField.innerText = text;

    if (context) {
        context.parentNode.insertBefore(textField, context);
    } else {
        document.body.appendChild(textField);
    }

    textField.select();
    document.execCommand('copy');
    // Let `.remove()` also work with older IEs
    textField.parentNode.removeChild(textField);
    console.log('should have copied ' + text);
}