Bootstrap 模式不适用于 Clipboard.js（在 Firefox 上）

Question

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

Modal好像不支持这个动作

当触发上述事件的按钮超出模式时，它就像一个魅力！因此，我决定让模态按钮触发模态之外的另一个隐藏按钮，以便可以完成操作。但它仍然不起作用！请帮助，下面的代码和示例。

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

首先，您要创建一个 yii2_ids 变量；

var yii2_ids = 1234567890;

并且 return按原样处理，不覆盖；

var yii2_ids = 1234567890;
$('#copy-button').click(function(){
    var clipboard = new Clipboard('#copy-button', {
        text: function() 
        {
            return yii2_ids;
        }
    });

你需要得到在这个函数中用 jQuery 和 return 写在模态 里的东西。我在 jsFiddle.

中为您做了一个工作示例

编辑：如果代码仍然无法在 Firefox 上运行但在其他浏览器上运行，则可能是 Firefox 缓存问题，您可以通过完全刷新 (CTRL + F5) 来解决。

Answer 2

我认为你的问题与这个 Clipboard issue 有关，它说：

Bootstrap's modal enforce focus for accessibility reasons but that causes problems with LOTS of third-party libraries, including clipboard.js.

You can turn off this functionality by doing...

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

Answer 3

将 Bootstrap 的 enforceFocus 函数设置为空是解决此问题的愚蠢方法。当有其他方法可以修复它时，从另一个库中删除代码不应该是你的选择。

副本在 Bootstrap 模态中不起作用的唯一原因是，为复制文本而创建的虚拟元素附加到模态之外的正文中，正如我们所知，它强制将焦点放在它，或者它的 children。因此，要修复它，我们只需要向 clipboardjs 添加一个容器选项，我们可以向其传递对模态 div 的引用。这样，虚拟元素将附加到焦点范围内，并且能够自身获得焦点以复制文本。

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

当模态框内有一个复制按钮时，将它传递给模态框的引用：

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

Bootstrap 模式不适用于 Clipboard.js（在 Firefox 上）

Bootstrap modal does not work with Clipboard.js (on Firefox)

jquery

bootstrap-modal

clipboard.js