1. 程式人生 > >JS pc端和移動端共同實現復制到剪貼板功能實現

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

oct com put 而是 minimum size func char ror

JS pc端和移動端實現復制到剪貼板功能實現

在網頁上復制文本到剪切板,一般是使用JS+Flash結合的方法,網上有很多相關文章介紹。隨著 HTML5 技術的發展,Flash 已經在很多場合不適用了,甚至被屏蔽。本文介紹的一款JS插件,實現了純JS方法復制文本到剪切板。

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

Github:
https://github.com/zenorocha/clipboard.js

可以通過npm方式安裝:

npm install clipboard --save

首先需要在頁面引入:

<script src="dist/clipboard.min.js"></script>

下面直接上html代碼:

<!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>

參考地址:

https://www.cnblogs.com/52fhy/p/5383813.html

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