Bootstrap模式不适用于Clipboard.js(在Firefox上)

Question

我在bootstrap模式上有一个按钮,它应该将一些数据(显示在模态中)复制到剪贴板(使用clipboard.js).

莫代尔似乎不支持这一行动.

当触发上述事件的按钮超出模态时,它就像一个魅力!所以,我决定让模态按钮触发模态外的另一个隐藏按钮,这样就可以完成动作了.但它仍然不起作用!请帮助,代码和示例如下.

https://jsfiddle.net/w6rL9sqz/2/

JS

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/clipboard.js"></script>
<script src="js/clipboard.min.js"></script>
<script>
    $( document ).ready(function() 
    {

        //tooltip
        $('.trigger-button').tooltip({
            trigger : 'click'
        });

        $('.trigger-button').click(function()
        {
            $('.trigger-button').tooltip('show');
            setTimeout(function()
            { 
                $('.trigger-button').tooltip('hide'); 
            }, 
            2000);  
            $('#copy-button').trigger('click');
        });

        // copy to clipboard
        var yii2_ids = 1234567890;
        $('#copy-button').click(function(){
            var clipboard = new Clipboard('#copy-button', {
                text: function() 
                {
                    return yii2_ids;
                }
            });
            clipboard.on('success', function(e) {
                console.log(e);
            });
        });
    });
</script>

HTML

<div class="container-fluid margin-top">
<div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 search-div">
        <div class="row">
            <center>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                <button id="copy-button" class="btn btn-primary" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard" style="display:none;">triggered-hidden</button>
                <button class="btn btn-primary trigger-button trigger-button" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard">Copy to Clipboard</button>
                <textarea></textarea>
            </div>
            </center>
        </div>
        <br />
        <button class="btn btn-primary" data-target="#upload-ebook" data-toggle="modal" type="button">Modal</button>
        <div class="modal fade bs-example-modal-lg"  id="upload-ebook" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <p style="text-align:left; background: black; color: white; padiing: 20px;">
                            <samp><b>id = $id</b></samp><br>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary trigger-button trigger-button" type="button" data-placement="left" class="btn btn-primary" title="Copied to Clipboard">Copy to Clipboard</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我认为您的问题与此剪贴板问题有关,该问题表明:

Bootstrap的模态强制执行焦点是出于可访问性原因,但这会导致第三方库(包括clipboard.js)出现问题.

您可以通过执行以下操作来关闭此功能

Bootstrap 3 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; Bootstrap 4 $.fn.modal.Constructor.prototype._enforceFocus = function() {};

Answer 2

将Bootstrap的enforceFocus函数设置为空是修复此问题的一种愚蠢方法.当有其他方法可以修复时,不应该从其他库中删除代码.

复制在Bootstrap模式中不起作用的唯一原因是因为为复制文本而创建的虚拟元素被附加到模态之外的正文中,正如我们所知,它强制对焦于它或其子元素.所以要修复它,我们只需要添加一个容器选项clipboardjs,我们可以将引用传递给我们的模态div.这样,虚拟元素将被附加在焦点范围内,并且能够自己接收焦点以复制文本.

这是不触及Bootstrap的固定代码enforceFocus:https://jsfiddle.net/uornrwwx/

如果在模态中有复制按钮,则将其传递给模态:

new Clipboard("button-selector", { container: yourModalHtmlElement });