javascript - 将文本复制到剪贴板在 Bootstrap 模式对话框中不起作用

Question

在模态对话框外时它工作正常，但是当尝试在 Bootstrap 模态对话框中将文本复制到剪贴板时它不起作用。

<button class="btn btn-primary-outline" data-toggle="modal" data-target="#dia">Open</button>
<button type="button" class="btn btn-info-outline btn-sm copy" data-clipboard-text="not in modal"><i class="fa fa-clipboard"></i></button>

<div id="test" class="modal fade" id="dia" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">Test</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info-outline btn-sm copy" data-clipboard-text="in modal">
                        <i class="fa fa-clipboard"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script> 
var clipboard = new Clipboard('.copy',{
            container: document.getElementById('test'),
        });
</script>

这是模态和非模态剪贴板功能的示例代码。在模态对话框中尝试将文本复制到剪贴板时，是否有任何解决方案可以解决此问题？

Answer 1

引用this issue

或:

Bootstrap 3

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

Bootstrap 4

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