工作“复制到剪贴板”在bootstrap模式中调用时，函数不起作用 [英] Working "Copy to Clipboard" function doesn't work when called in bootstrap modal

问题描述

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测试了这个被复制到我的剪贴板：

This Works:

When I try this without a bootstrap modal popup, kilroy tested this is copied to my clipboard:

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

这不是：

但是...当我将< button> 移动到模态中时，即使控制台报告应该已复制，也不会将任何内容复制到剪贴板kilroy测试了这个。

This Doesn't:

But... when I move the <button> into the modal, nothing gets copied to the clipboard, even though the console reports "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>

---

我因任何其他方式亏本解决这个问题 -

---

I'm at a loss for any other way to troubleshoot this--

• 我已经证明了 copytext（）的功能工作，


• 我已经删除了有关应该复制的内容的任何问题，并且


• 我已经证明了 copy-btn （正在调用 copytext（）并登录到控制台）。

• I've demonstrated that the copytext() function works,
• I've eliminated any question about the source of what should be copied, and
• I've demonstrated that copy-btn is being called when the button is clicked (copytext() is being called and logging to the console).

唯一剩下的就是对bootstrap模态有些不满。

The only thing left is some wonkiness about the bootstrap modal.

使用jquery 2.1.1和bootstrap 3.3.6

Using jquery 2.1.1 and bootstrap 3.3.6

打开任何想法或解决方法：）

Open to any ideas or workarounds :)

推荐答案

document.execCommand（'copy'）;功能取决于可信事件。如果需要信任某个事件，那么目标元素也应该具有适当的焦点。

document.execCommand('copy'); functionality depends on trusted events. If a event needs to be trusted then the target element should also have a proper focus.

尝试将焦点设置在textElement上并在删除后将其设置为模态来自文本元素。这应解决问题

Try setting the focus on the textElement and set it to the modal after you remove it from the text element. this should solve the problem

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
}

这篇关于工作“复制到剪贴板”在bootstrap模式中调用时，函数不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！