value:<span id="bar" class="btn" data-clipboard-target="#bar">value</span> <script src="clipboard.min.js"></script> <script> //init var clipboard = new Clipboard('.btn'); //優雅降級:safari 版本號>=10,提示覆製成功;不然提示需在文字選中後,手動選擇「拷貝」進行復制 clipboard.on('success', function(e) { alert('複製成功!'); e.clearSelection(); }); clipboard.on('error', function(e) { alert('請選擇「拷貝」進行復制!') }); </script>
2. 點擊按鈕,複製文本框內容,代碼以下html
<!-- Target --> <input id="bar" value="Mussum ipsum cacilds..."> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button> <script src="clipboard.min.js"></script> <script> //init var clipboard = new Clipboard('.btn'); //優雅降級:safari 版本號>=10,提示覆製成功;不然提示需在文字選中後,手動選擇「拷貝」進行復制 clipboard.on('success', function(e) { alert('複製成功!'); e.clearSelection(); }); clipboard.on('error', function(e) { alert('請選擇「拷貝」進行復制!') }); </script>
3. 點擊按鈕,複製html代碼(new 對象的時候爲其賦值便可),代碼以下git
<button type="button" class="btn btn-default embedAddress" data-clipboard-action="copy" onclick="copyEmbed()">複製地址</button> <textarea id="embedAddrModel" style="display: none;"> <iframe id="fram" height="428px" width="800px" frameborder="0" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true" src="網址"></iframe> </textarea> function copyEmbed() { var clipboard = new Clipboard('.btn',{ text: function (trigger) { var html = document.getElementById('embedAddrModel').innerHTML; for (var i = 0; i < 2; i ++){ html = html.replace('<','<'); html = html.replace('>','>'); } return html; } }); clipboard.on('success',function (e) { alert("複製成功"); e.clearSelection(); clipboard.destroy(); }); clipboard.on('error',function (e) { alert("複製失敗,請從新複製"); clipboard.destroy(); }); }
複製HTML,能夠將HTML代碼放到textarea中,防止頁面解析此段代碼;可是獲取的HTML代碼中的「<」,「>」會被解析成‘<’,'>',因此須要將其轉換回去;github
若是HTML代碼執行的話,能夠不放到textarea中,這樣就不用轉換HTML代碼中的‘<’,‘>’,複製的就是所需的代碼。web
參考文檔ui