2

我有一个 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。但是 Google Chrome 在这两种代码尝试下都可以。

4

3 回答 3

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" />
于 2013-05-23T00:59:51.013 回答
0

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

我们需要在引导程序的“js”文件中进行更改。

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

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

!$(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/

于 2014-02-26T12:58:20.733 回答
0 

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

希望能帮到你

于 2015-05-08T10:12:58.307 回答