在引导模式上使用 ZeroClipboard答案

【问题标题】：Using ZeroClipboard on a Bootstrap Modal在引导模式上使用 ZeroClipboard
【发布时间】：2013-05-22 19:41:19
【问题描述】：

我有一个 Twitter Bootstrap 模式，我想在其中显示一个“复制到剪贴板”按钮。我正在尝试使用 ZeroClipboard 组件https://github.com/jonrohan/ZeroClipboard

以下是我的示例代码。按钮“Copy1”直接在页面上并且有效。按钮“Copy2”在模式上，但不起作用。按下“Copy2”时，Internet Explorer 似乎“锁定”了。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link type="text/css" rel="stylesheet" href="/Content/bootstrap.min.css" />

    <script src="/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/Scripts/ZeroClipboard.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="row">
        <div class="span6">
            <!-- Textbox and copy button pair #1 (not on modal) -->
            <input type="text" id="Input1" />
            <button class="btn" type="button" id="Copy1" data-clipboard-target="Input1">Copy Input #1</button>
        </div>
        <div class="span6">
            <a class="btn" type="button" href="#Modal1" data-toggle="modal">Show Modal Dialog</a>
        </div>
    </div>

    <div class="modal hide fade" role="dialog" id="Modal1">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>Copy to Clipboard Modal</h3>
        </div>

        <div class="modal-body">
            <p>
                <!-- Textbox and copy button pair #2 (on modal) -->
                <input type="text" id="Input2" />
                <button class="btn" type="button" id="Copy2" data-clipboard-target="Input2">Copy Input #2</button>
            </p>

        </div>

        <div class="modal-footer">
            <p>
                <button class="btn" type="button" data-dismiss="modal">Close</button>
            </p>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {

            ZeroClipboard.setDefaults({
                moviePath: '/Scripts/ZeroClipboard.swf'
            });

            var clip1 = new ZeroClipboard($("#Copy1"));
            var clip2 = new ZeroClipboard($("#Copy2"));
        });
    </script>

</body>
</html>

任何人都可以就出了什么问题提供一些指导吗？我知道 Bootstrap 会在显示之前将模式从 DOM 树中取出，但我不确定如何适应这种情况。

编辑：将第二个输入的 id 更正为“Input2”以匹配按钮的目标。

另外，我尝试了以下javascript：

//var clip2 = new ZeroClipboard($("#Copy2"));
$("#Modal1").on('shown', function () {
  var clip2 = new ZeroClipboard($("#Copy2"));
});

此外，问题似乎是特定于浏览器的。

原始代码和我修改后的代码锁定了 Internet Explorer 10。但谷歌浏览器在这两种代码尝试下都可以。

【问题讨论】：

见：github.com/jonrohan/ZeroClipboard/issues/90
如果我删除了可以工作的 ZeroClipboard，那么模态框上的那个仍然不能工作。
@Bass：这个问题完全不相关。

标签： html twitter-bootstrap zeroclipboard

【解决方案1】：

您的第二个复制按钮指向一个不存在的 ID：

<button class="btn" type="button" id="Copy2" data-clipboard-target="Input2">Copy Input #2</button>

您的标记不正确：

<input type="text" id="Text2" />

应该是：

<input type="text" id="Input2" />

【讨论】：

我已更正原始问题中的 HTML。我还添加了更多信息。看来我的问题是特定于 IE 的。

【解决方案2】：

当我们将“ZeroClipboard”与“Bootstrap modal”一起使用时，会在“IE”中产生冲突。

我们需要对 bootstrap 的“js”文件进行修改。

“Bootstrap.js”中有“Modal.prototype.enforceFocus”元素定义的方法。

这里，在“If”条件下，我们需要添加以下条件，

!$(e.target).closest('[id ^= "ZeroClipboardMovie_"]').length)

结果代码如下所示，

if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('[id ^= "ZeroClipboardMovie_"]').length) {
         this.$element.focus()
 }

其中，[id ^= "ZeroClipboardMovie_"] 是 ZeroClipboard 容器元素。

在上面的代码中，它正在使用最近的“ZeroClipboard”容器。您可以根据需要将其更改为适当的“zeroclipboard-container”。

您也可以查看这篇博文了解更多详情-http://wisdmlabs.com/blog/ie-issue-zeroclipboard-bootstrap-modal/

【讨论】：

【解决方案3】：

  if (!checkIsBelowIE8()) {
                if (/MSIE|Trident/.test(window.navigator.userAgent)) {
                    (function ($) {
                        var zcClass = '.' + ZeroClipboard.config('containerClass');
                        var proto = $.fn.modal.Constructor.prototype;
                        proto.enforceFocus = function () {
                            $(document)
                        .off('focusin.bs.modal')  /* Guard against infinite focus loop */
                        .on('focusin.bs.modal', $.proxy(function (e) {
                            if (this.$element[0] !== e.target &&
                             !this.$element.has(e.target).length &&
                            /* Adding this final condition check is the only real change */
                             !$(e.target).closest(zcClass).length
                          ) {
                                this.$element.focus();
                            }
                        }, this));
                        };
                    })(window.jQuery);
                }
                var client = new ZeroClipboard($(".clipboard"));
                client.on("copy", function (e) {
                    var clipboard = e.clipboardData;
                    clipboard.setData("text/plain", $.trim($(e.target).parent().prev().find("input").val()));
                    showMsg("success", "copy success");
                });
            }
function checkIsBelowIE8() {
    try {
        var b_name = navigator.appName;
        var b_version = navigator.appVersion;
        var version = b_version.split(";");
        var trim_version = version[1].replace(/[ ]/g, "");
        if (b_name == "Microsoft Internet Explorer") {
            /*if IE6 or IE7*/
            if (trim_version == "MSIE8.0" || trim_version == "MSIE7.0" || trim_version == "MSIE6.0") {
                return true;
            } else {
                return false;
            }
        } else {
            return false;
        }
    } catch (e) {
        return false;
    }
}

希望能帮到你

【讨论】：