溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關使用clipboard.js怎么實現一個復制功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
第一種
//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target='#copyValue'>復制</button>
//js部分
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
e.clearSelection();
alert('復制成功');
});
clipboard.on('error',function(e){
e.clearSelection();
alert('復制失敗');
});說明：如果我們使用按鈕復制的是另一個元素的內容，則我們可以使用這種方法。此時將按鈕稱為觸發元素，被復制的元素稱為目標元素。此時data-clipboard-target的值為目標元素的選擇器，而data-clipboard-target的屬性被設置在觸發元素上。new Clipboard()為實例化對象，參數可以是HTML元素，元素選擇器。有success和error兩個事件可以供我們監聽，實現自己的邏輯。因為復制完成后，目標元素會處于選中狀態，所以我們需要e.clearSelection()取消目標元素的選中狀態。
優點：復制的內容可以是動態的，目標元素的值發生變化，復制的值也發生變化。
適用場景：復制內容可變，不固定。
第二種
//html部分
<button type="button" data-clipboard-text='復制內容'>復制</button>
//js部分
new Clipboard('button');說明：data-clipboard-text的值為你要復制的內容。無目標元素，只有觸發元素。
缺點：復制的內容是靜態的，不變的，提前設置好的。
適用場景：復制內容固定不變
對于以上缺點，我們可以優化如下，使之復制的內容也是動態的。
//html部分
<input type="text" id="copyValue" />
<button type="button" id="copy">復制</button>
//js
$('#copy').on('click', function () {
var value = $('#copyValue').val();
$('#copy').attr('data-clipboard-text', value);
var clipboard = new Clipboard('#copy');
clipboard.on('success', function (e) {
alert('復制成功');
});
clipboard.on('error', function (e) {
alert('復制失敗');
});
})接著這里曬出最常用的幾種方式，以供不時之需。
function-target
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function-target</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button class="btn">Copy</button>
<div>hello</div>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn', {
target: function() {
return document.querySelector('div');
}
});
clipboard.on('success', function(e) {
//console.log(e);
alert('復制成功！')
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>function-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function-text</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button class="btn">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn', {
text: function() {
return 'to be or not to be';
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>target-div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<span class="copy_content">hello 123</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target=".copy_content">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>target-input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-input</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>target-textarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-textarea</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<textarea id="bar">hello</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>看完上述內容，你們對使用clipboard.js怎么實現一個復制功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
