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

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

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

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. 點擊按鈕，復制文本框內容，代碼如下

<!-- 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 對象的時候為其賦值即可），代碼如下

<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代碼中的‘<’，‘>’,復制的就是所需的代碼。

 

　　參考文檔