Clipboard.js實現點擊自動復制內容的功能

Clipboard.js實現點擊自動復制內容的功能

1. 點擊非文本框，自動復制，代碼如下

value:<span id="bar" class="btn" data-clipboard-target="#bar">value</span>
<script src="clipboard.min.js"></script>
<script>//initvar clipboard = new Clipboard('.btn');//優雅降級:safari 版本號>=10,提示復制成功;否則提示需在文字選中后，手動選擇“拷貝”進行復制
    clipboard.on('success', function(e) {alert('復制成功!');e.clearSelection();});clipboard.on('error', function(e) {alert('請選擇“拷貝”進行復制!')});
</script>

　　2. 點擊按鈕，復制文本框內容，代碼如下

<!-- 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>//initvar clipboard = new Clipboard('.btn');//優雅降級:safari 版本號>=10,提示復制成功;否則提示需在文字選中后，手動選擇“拷貝”進行復制
    clipboard.on('success', function(e) {alert('復制成功!');e.clearSelection();});clipboard.on('error', function(e) {alert('請選擇“拷貝”進行復制!')});
</script>

　　3. 點擊按鈕，復制html代碼（new 對象的時候為其賦值即可），代碼如下

<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('&lt;','<');html = html.replace('&gt;','>');}return html;}});clipboard.on('success',function (e) {alert("復制成功");e.clearSelection();clipboard.destroy();});clipboard.on('error',function (e) {alert("復制失敗,請重新復制");clipboard.destroy();});}

　　?復制HTML，可以將HTML代碼放到textarea中，防止頁面解析此段代碼；但是獲取的HTML代碼中的“<”，“>”會被解析成‘&lt;’,'&gt;'，所以需要將其轉換回去；

　　 如果HTML代碼執行的話，可以不放到textarea中，這樣就不用轉換HTML代碼中的‘<’，‘>’,復制的就是所需的代碼。

?

　　參考文檔