1、HTML部分
<div class="wrapper"> <h3>Click button below to copy current url to clipboard with hidden input</h3> <input type="hidden" id="input-url" value="Copied!"> <button class="btn-copy">Copy</button> </div>
2、CSS部分
.wrapper{ width: 100%; height: 100%; text-align: center; margin-top:10px; } .btn-copy{ background-color: #38AFDD; border: transparent; border-bottom: 2px solid #0086B7; border-radius: 2px; padding: 10px; min-width: 100px; color: #fff; } .btn-copy:hover, .btn-copy:focus{ background-color: #48A1C1; border-bottom: 2px solid #38AFDD; /*transition cross browser*/ transition: all .3s ease-in; -webkit-transition: all .3s ease-in; -moz-transition:all .3s ease-in; -o-transition: all .3s ease-in; } 3、JS部分 var clipboard = new Clipboard('.btn-copy', { text: function() { return document.querySelector('input[type=hidden]').value; } }); clipboard.on('success', function(e) { alert("Copied!"); e.clearSelection(); }); $("#input-url").val(location.href); //safari if (navigator.vendor.indexOf("Apple")==0 && /\sSafari\//.test(navigator.userAgent)) { $('.btn-copy').on('click', function() { var msg = window.prompt("Copy this link", location.href); }); }