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. 點擊按鈕,複製文本框內容,代碼以下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('&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;',因此須要將其轉換回去;github

   若是HTML代碼執行的話,能夠不放到textarea中,這樣就不用轉換HTML代碼中的‘<’,‘>’,複製的就是所需的代碼。web

 

  參考文檔ui

相關文章
相關標籤/搜索