JS pc端和移動端共同實現複製到剪貼板功能實現

時間 2019-12-08

標籤移動共同實現複製剪貼板功能欄目 JavaScript 简体版

原文原文鏈接

JS pc端和移動端實現複製到剪貼板功能實現html

在網頁上覆制文本到剪切板，通常是使用JS+Flash結合的方法，網上有不少相關文章介紹。隨着 HTML5 技術的發展，Flash 已經在不少場合不適用了，甚至被屏蔽。本文介紹的一款JS插件，實現了純JS方法複製文本到剪切板。git

插件名是Clipboard.js，該插件不依賴 Flash，而是依賴於最新HTML5推出 Selection API 和 execCommand API。github

Github：
https://github.com/zenorocha/clipboard.jsnpm

能夠經過npm方式安裝：ui

npm install clipboard --savespa

首先須要在頁面引入：.net

下面直接上html代碼:scala

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>複製功能實現</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">
    <script src ="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>
<body>
    <input class="foo" value="這裏是內容">
    <span class="fdd">阿斯頓發斯蒂芬阿斯蒂芬</span>
    <button class="btn" data-clipboard-target=".foo">點擊複製</button>
    <button class="btn" data-clipboard-target=".fdd">點擊複製</button>
    <script src ="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <script>
        var clipboard = new ClipboardJS('.btn');
        clipboard.on('success', function(e) {
                alert("複製成功!");
                 e.clearSelection();
        });
        clipboard.on('error', function(e) {
                  alert("複製失敗!");
        });
    </script>


</body>
</html>