中文居然没搜索到什么结果,遂google之。
原因:
没有获得焦点(文档↓)
For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container
value.
解决方法:
1.增加焦点容器(我用的):
html:
<input type="text" class="form-control" id="copy-input" value="Copied successfully!"/>
<br />
<a href="#" id="copy" data-clipboard-target="#copy-input" class="btn btn-default">Copy input content to clipboard</a>
JS:
new Clipboard('.btn', {
container: document.getElementById('modal') //html所在模态框ID
});
P.S.很奇怪,用data-clipboard-text 失效,只有这种html里分开的才成功
2.模态框的事件里增加
$(".modal").on("shown.bs.modal", function() {
console.log('a', Clipboard, $('#copy'), $("#copy-input").val());
var clipboard = new Clipboard('#copy')
});
3.其它(未尝试):
增加一句:
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
参考:
https://stackoverflow.com/questions/40490733/using-clipboard-js-in-a-bootsrap-modal
https://stackoverflow.com/questions/40526156/clipboard-js-not-working-in-bootstrap-modal
https://stackoverflow.com/questions/38398070/bootstrap-modal-does-not-work-with-clipboard-js-on-firefox
https://github.com/zenorocha/clipboard.js/issues/155