Search code examples
javascriptzeroclipboard

How to debug? ZeroClipboard loaded no error&warning but not copying

I've confused for this question two days. ZeroClipboard works no error & warning, but it can not copy the content. I'd check the the Ans at ZeroClipboard: swf loaded, but not working, but still not works well; I did not know how to debug it- -,

  • The env:vagrant & LAMP & localhost ;
  • The files and info of the chrome are shown as following:

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 looks like:

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

XHR

Solution

  • It's because you've given your target DOM element two ids: "readonlyEmail", in addition to "clipboard_text". It'll work once you remove "readonlyEmail".