将文本复制到剪贴板不起作用,在Bootstrap模态对话框中工作



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

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

这是剪贴板功能的示例代码,而不是模态。试图将文本复制到模态对话框中的剪贴板时,是否有任何解决方案可以解决问题?

请参阅此问题

或:

bootstrap 3

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

bootstrap 4

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

最新更新