Html 在引导模式上使用ZeroClipboard

我有一个Twitter引导模式，我要在其中显示一个“复制到剪贴板”按钮。我正在尝试使用ZeroClipboard组件

下面是我的示例代码。按钮“Copy1”直接位于页面上，可以正常工作。按钮“Copy2”在模式上，不起作用。按下“Copy2”时，Internet Explorer显示为“锁定”

复制输入#1
×
复制到剪贴板模式

复制输入#2


接近

$（文档）.ready（函数（）{
ZeroClipboard.setDefault({
moviePath:“/Scripts/ZeroClipboard.swf”
});
var clip1=新的零剪贴板（$（“#Copy1”）；
var clip2=新的零剪贴板（$（“#Copy2”）；
});

有人能提供一些关于哪里出了问题的指导吗？我知道引导会在显示之前将模式从DOM树中移除，但我不确定如何适应这种情况

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

此外，我还尝试了以下javascript：

//var clip2=新的零剪贴板（$（“#Copy2”）；
$（“#Modal1”）.on（'显示'，函数（）{
var clip2=新的零剪贴板（$（“#Copy2”）；
});

此外，问题似乎与浏览器有关

---

原始代码和修改后的代码将锁定Internet Explorer 10。但是Google Chrome在这两种代码尝试下都是正常的。

您的第二个复制按钮针对的是一个不存在的ID:

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

复制输入#2

您的标记不正确：

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

应该是：

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

当我们将“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容器”

您还可以查看此博客文章以了解更多详细信息-

if（！checkIsBelowIE8（））{
if（/MSIE | Trident/.test（window.navigator.userAgent））{
（函数（$）{
var zcClass='.'+ZeroClipboard.config（'containerClass'）；
var proto=$.fn.modal.Constructor.prototype；
proto.enforceFocus=函数（）{
$（文件）
.off（'focusin.bs.modal'）/*防止无限聚焦循环*/
.on（'focusin.bs.modal'，$.proxy（函数（e））{
如果（此.$element[0]！==e.target&&
！此.$element.has（e.target）.length&&
/*添加此最终条件检查是唯一真正的更改*/
！$（e.target）.最近的（ZC类）.长度
) {
这个.$element.focus（）；
}
}这),；
};
})（window.jQuery）；
}
var client=新的零剪贴板（$（“.clipboard”）；
客户。关于（“复制”，功能（e）{
var clipboard=e.clipboardData；
clipboard.setData（“text/plain”，$.trim（$（e.target）.parent（）.prev（）.find（“input”）.val（））；
showMsg（“成功”，“复制成功”）；
});
}
函数checkIsBelowIE8（）{
试一试{
var b_name=navigator.appName；
var b_version=navigator.appVersion；
var version=b_version.split（“；”）；
var trim_version=version[1]。替换（/[]/g，”）；
如果（b_name==“Microsoft Internet Explorer”）{
/*如果是IE6或IE7*/
如果（trim|U版本==“MSIE8.0”| trim|U版本==“MSIE7.0”| trim|U版本==“MSIE6.0”）{
返回true；
}否则{
返回false；
}
}否则{
返回false；
}
}捕获（e）{
返回false；
}
}

请参阅：如果我删除了可用的ZeroClipboard，则模态上的剪贴板仍然不起作用。@Bass：这个问题完全不相关。我已更正了原始问题中的HTML。我还添加了一些详细信息。我的问题似乎与IE有关。