如何调试？ ZeroClipboard 加载没有错误和警告但没有复制

Question

我已经为这个问题困惑了两天。 ZeroClipboard 没有错误和警告，但它不能复制内容。我会在 ZeroClipboard: swf loaded, but not working 上查看答案，但仍然无法正常工作；不知道怎么调试--,

• 环境：vagrant & LAMP & localhost ;
• chrome的文件和信息如下：

index.php:

<div class="input-group">
<input id="readonlyEmail" type="text" readonly="readonly" class="new-email form-control" value="" id="clipboard_text">
<span class="input-group-btn">
  <button class="btn btn-default" type="button" id="copy-button" data-clipboard-target="clipboard_text">
    <i class="fa fa-clipboard fa-lg"></i>
  </button>
</span>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
<script type="text/javascript" src="js/clipboard.js"></script>

clipboard.js 看起来像：

ZeroClipboard.config( { swfPath: "//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf" } );
var client = new ZeroClipboard( document.getElementById("copy-button") );

client.on( "ready", function( readyEvent ) {
  client.on( "aftercopy", function( event ) {
    event.target.blur();
    alert("Copied text to clipboard: " );
  } );
} );

XHR

Answer 1

这是因为除了“clipboard_text”之外，您还为目标 DOM 元素提供了两个 id：“readonlyEmail”。一旦您删除“readonlyEmail”，它就会起作用。