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（＆＃39;复印＆＃39）;功能取决于可信事件。如果需要信任某个事件，那么目标元素也应该具有适当的焦点。

尝试将焦点设置在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
}

Answer 2

简而言之：由于模式有`<main>，tabindex="-1"只适用于Chrome。对于跨浏览器解决方案，您必须将textarea插入到DOM中作为模式的后代。

关键是，执行复制命令时textarea必须是.focus()。换句话说，它必须具有焦点。这可以通过在其上调用document.activeElement来实现，但是在特定情况下，点击事件发生在已经成为焦点的 .focus() 的模式中。在本方案编写时，tabindex="-1"方法仅适用于Chrome。在其他浏览器中，.focus()将阻止textarea聚焦，除非它是模式的后代节点。

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

tabindex="-1"

在bootstrap模式中调用时，使用“复制到剪贴板”功能不起作用

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

本作品：

这不是：

2 个答案: