clipboard.js——相容各種版本瀏覽器的剪下板庫
阿新 • • 發佈：2019-01-02
需求:
我們在瀏覽網站時,通常有複製某段關鍵性文字的需求,一般情況下,我們是選中這段文字,然後ctrl + c 進行復制,但是人總是很懶的,比如說我,連這兩個操作都不願意做,我僅僅只想把點選一下某個按鈕或者點選下改文字就可以複製到剪下板,這樣可以節約我的時間.
解決方案:
將文字複製到剪下板是前臺js的事,但是瀏覽器眾多,怎麼才能相容各種版本的瀏覽器,讓我們輕鬆寫出一鍵複製到剪下板的js程式碼.這時就該clipboard.js出場了.clipboard.js是一個github上的開源專案，clipboard.js 實現了純 JavaScript （無 Flash）的瀏覽器內容複製到系統剪貼簿的功能。可以在瀏覽器和
Node 環境中使用。支援 Chrome 42+、Firefox 41+、IE 9+、Opera 29+
程式碼演示:
<script src="clipboard.min.js"></script> <textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">指令碼之家是國內專業的網站建設資源、指令碼程式設計學習類網站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網頁製作、網路程式設計、網站建設等程式設計資料。</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar"> Cut to clipboard </button> <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); alert("複製成功"); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); }); </script>
<!-- 官方例項二： --><script src="dist/clipboard.min.js"></script><button class="btn"><script type="text/javascript">var clipboard = new Clipboard('.btn');clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection();});clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger);});</script>
我的測試案例:1.button內部文字測試
<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="clipboard.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
<!--測試1-->
<!--button按鈕測試，需要複製的值放在屬性 data-clipboard-text中-->
<button class="btn1" data-clipboard-text="測試1">點選測試1</button><br><br>
</body>
</html>
<script type="text/javascript">
<!--測試1-->
$(document).ready(function(){
var clipboard1 = new Clipboard('.btn');
clipboard1.on('success', function(e) {
console.log(e);
alert("測試1複製成功！")
});
clipboard1.on('error', function(e) {
console.log(e);
alert("測試1複製失敗！請手動複製")
});
})
</script>2.div內部文字測試
<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="clipboard.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
在這裡貼上:<textarea id="textarea"></textarea><br>
<!--測試2-->
<!--a按鈕測試，需要複製的值放在屬性 data-clipboard-text中<br>-->
<a class="a" data-clipboard-text="測試2">點選測試2</a><br><br>
</body>
</html>
<script type="text/javascript">
<!--測試2-->
$(document).ready(function(){
var clipboard2 = new Clipboard('.a');
clipboard2.on('success', function(e) {
console.log(e);
alert("測試2複製成功！")
});
clipboard2.on('error', function(e) {
console.log(e);
alert("測試2複製失敗！請手動複製")
});
})
</script>3.div內部文字測試
<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="clipboard.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
在這裡貼上:<textarea id="textarea"></textarea><br>
<!--測試3-->
<!--測試，通過按鈕的data-clipboard-target屬性獲取指定標籤中的值-->
<div>測試3</div>
<button class="btn3" data-clipboard-action="copy" data-clipboard-target="div">點選測試3</button><br><br>
</body>
</html>
<script type="text/javascript">
<!--測試3-->
$(document).ready(function(){
var clipboard3 = new Clipboard('.btn3');
clipboard3.on('success', function(e) {
console.log(e);
alert("測試3複製成功！")
});
clipboard3.on('error', function(e) {
console.log(e);
alert("測試3複製失敗！請手動複製")
});
})
</script>4.文字框測試
<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="clipboard.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
在這裡輸入文字:<textarea id="textarea1"></textarea><br>
在這裡貼上<textarea id="textarea2"></textarea><br>
<!--測試4-->
<!--測試，通過按鈕的data-clipboard-target屬性獲取指id的標籤中的值中 -->
<button class="btn4" data-clipboard-action="copy" data-clipboard-target="#textarea1">點選測試4</button>
</body>
</html>
<script type="text/javascript">
<!--測試4-->
$(document).ready(function(){
var clipboard4 = new Clipboard('.btn4');
clipboard4.on('success', function(e) {
console.log(e);
alert("測試4複製成功！")
});
clipboard4.on('error', function(e) {
console.log(e);
alert("測試4複製失敗！請手動複製")
});
})
</script>