如何使用jquery一鍵復制到剪切板
1 回答
收到一只叮咚
TA貢獻1821條經驗 獲得超5個贊
html部分
<!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>
<input id="t" type="text"/>數據輸出測試
<textarea id="t2"></textarea>
<!--測試1-->
<!--button按鈕測試，需要復制的值放在屬性 data-clipboard-text中-->
<button class="btn" data-clipboard-text="測試1">點擊測試1</button>
<!--測試2-->
<!--a按鈕測試，需要復制的值放在屬性 data-clipboard-text中-->
<a class="a" data-clipboard-text="測試2">點擊測試2</a>
<!--測試3-->
<!--測試，通過按鈕的data-clipboard-target屬性獲取指定標簽中的值-->
<div>測試3</div>
<button class="btn2" data-clipboard-action="copy" data-clipboard-target="div">點擊測試3</button>
<!--測試4-->
<!--測試，通過按鈕的data-clipboard-target屬性獲取指id的標簽中的值中 -->
<button class="btn3" data-clipboard-action="copy" data-clipboard-target="#t2">點擊測試4</button>
</body>
</html>
jquery部分
<!--測試1-->
$(document).ready(function(){
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
alert("測試1復制成功！")
});
clipboard.on('error', function(e) {
console.log(e);
alert("測試1復制失??！請手動復制")
});
})
<!--測試2-->
$(document).ready(function(){
var clipboard1 = new Clipboard('.a');
clipboard1.on('success', function(e) {
console.log(e);
alert("測試2復制成功！")
});
clipboard1.on('error', function(e) {
console.log(e);
alert("測試2復制失敗！請手動復制")
});
})
<!--測試3-->
$(document).ready(function(){
var clipboard2 = new Clipboard('.btn2');
clipboard2.on('success', function(e) {
console.log(e);
alert("測試3復制成功！")
});
clipboard2.on('error', function(e) {
console.log(e);
alert("測試3復制失?。≌埵謩訌椭?quot;)
});
})
<!--測試4-->
$(document).ready(function(){
var clipboard3 = new Clipboard('.btn3');
clipboard3.on('success', function(e) {
console.log(e);
alert("測試4復制成功！")
});
clipboard3.on('error', function(e) {
console.log(e);
alert("測試4復制失??！請手動復制")
});
})
注：此方法主要使用了clipboard，無需通過其他文件，引入一個clipboard.js文件即可使用，簡單方便
- 1 回答
- 0 關注
- 2217 瀏覽
添加回答
舉報
0/150
提交
取消