Question

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

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

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

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

我认为您的问题与此Clipboard issue有关，后者说：

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 });

Answer 3

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

var yii2_ids = 1234567890;

按原样返回，不要覆盖;

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

您需要使用jQuery获取用modal 编写的内容并将其返回到此函数中。我在这个jsFiddle中为你做了一个有效的例子。

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

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

3 个答案: