html5頁面實現點擊複製功能

時間 2019-11-26

標籤 html5 html 頁面實現點擊複製功能欄目 HTML5 简体版

原文原文鏈接

在實際工做中，有時候會遇到這樣的需求，頁面上有一個連接，不須要選中連接內容，只須要點擊複製按鈕，就能夠把連接內容複製到剪切板。這時候能夠使用clipboard插件來實現。如下是一個簡單的demo。html

須要購買阿里雲產品和服務的，點擊此連接領取優惠券紅包，優惠購買哦，領取後一個月內有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07npm

首先能夠經過npm install clipboard --save-dev 來安裝該插件函數

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>clipboard示例</title>
    <script src="lib/clipboard/dist/clipboard.min.js"></script>
</head>
<body>

<h2>從屬性裏複製</h2>
<!--data-clipboard-text屬性的值將會被複制-->
<div id="btn" class="js-copy" data-clipboard-text="111-從屬性複製">
    <span>複製到剪切板-111</span>
</div>
<hr>

<h2>從另一個元素複製內容</h2>
<textarea id="bar">222-從另一個元素複製內容</textarea>
<button id="btn2" data-clipboard-target="#bar">複製到剪切板-222</button>
<hr>

<h2>JS裏指定複製的內容
<button id="btn3" data-clipboard-target="#bar">複製到剪切板-333</button></h2>

<script>

    //從屬性裏複製
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);//實例化
    clipboard.on('success', function(e) {//複製成功執行的回調，可選
        console.log(e);
    });
    clipboard.on('error', function(e) {//複製失敗執行的回調，可選
        console.log(e);
    });


    //從另一個元素複製內容
    var btn2 = document.getElementById('btn2');
    var clipboard2 = new Clipboard(btn2);//實例化
    clipboard2.on('success', function(e) {//複製成功執行的回調，可選
        console.log(e);
    });
    clipboard2.on('error', function(e) {//複製失敗執行的回調，可選
        console.log(e);
    });


    //JS裏指定複製的內容
    var btn3 = document.getElementById('btn3');
    var clipboard3 = new Clipboard(btn3, {
        text: function() {
            return '333-JS裏指定複製的內容';
        }
    });
    clipboard3.on('success', function(e) {//複製成功執行的回調，可選
        console.log(e);
    });
    clipboard3.on('error', function(e) {//複製失敗執行的回調，可選
        console.log(e);
    });

</script>
</body>
</html>