在本文中，我將向你展示如何使用簡(jiǎn)單的 JavaScript 代碼實(shí)現(xiàn)：
1承疲、 在用戶操作上向剪貼板添加文本燃箭，例如按下按鈕冲呢。
2、當(dāng)用戶復(fù)制內(nèi)容時(shí)修改剪貼板的內(nèi)容招狸。
將要使用的 API 不需要任何外部庫碗硬，并且具有很好的瀏覽器兼容性！
通過點(diǎn)擊按鈕復(fù)制
在網(wǎng)頁上瓢颅，定義一個(gè)按鈕恩尾，可以點(diǎn)擊這個(gè)個(gè)按鈕快速復(fù)制指定的內(nèi)容。用戶只要鼠標(biāo)輕輕一點(diǎn)就可以把需要的內(nèi)容快速復(fù)制在粘貼面板挽懦，可以讓用戶有更加舒適的體驗(yàn)翰意。
此交互可應(yīng)用于快速獲取 URL ，長(zhǎng)字符串（如 SSH 密鑰，終端命令冀偶，十六進(jìn)制顏色或經(jīng)常復(fù)制和粘貼的任何其他數(shù)據(jù)）醒第。
為了實(shí)現(xiàn)這個(gè)功能，我們需要使用一個(gè)名為 execCommand() 的 JavaScript 方法进鸠。它允許我們調(diào)用許多操縱可編輯內(nèi)容的不同事件稠曼，例如使文本變?yōu)榇煮w或者斜體、進(jìn)行撤消或者重做客年、以及復(fù)制霞幅、剪切和粘貼。
document.execCommand('copy');
上面這段代碼量瓜，和在鍵盤上按 ctrl + c 是一樣的司恳。
在 JavaScript 中我們可以通過 Selection API 來獲取 HTML 頁面中的元素。
現(xiàn)在創(chuàng)建一個(gè)小例子：
HTML 代碼
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<p id="content-holder">This text will be inserted into the clipboard.</p>
<button id="copy-button">Copy Text</button>
<textarea placeholder="Paste here"></textarea>
</body>
</html>
JS 代碼
// 通過 getElementById 方法獲取 id 為 copy-button 的 button 標(biāo)簽
var button = document.getElementById("copy-button");
// 通過 getElementById 方法獲取 id 為 content-holder 的 p 標(biāo)簽
var contentHolder = document.getElementById("content-holder");
// 監(jiān)聽 button 標(biāo)簽的點(diǎn)擊事件,當(dāng) button 標(biāo)簽被點(diǎn)擊時(shí)绍傲，觸發(fā)后面的回調(diào)函數(shù)
button.addEventListener("click", function() {
// 創(chuàng)建 createRange 方法對(duì)象
var range = document.createRange();
// 創(chuàng)建 getSelection 方法對(duì)象扔傅，表示用戶選擇的文本范圍或光標(biāo)的當(dāng)前位置。
var selection = window.getSelection();
// 通過 selection.removeAllRanges() 方法清除選擇范圍
selection.removeAllRanges();
// selectNodeContents 方法選擇 contentHolder 子節(jié)點(diǎn)的內(nèi)容
// 這里指 p 標(biāo)簽中的文本節(jié)點(diǎn)內(nèi)容
range.selectNodeContents(contentHolder);
// 一個(gè)區(qū)域（Range）對(duì)象將被增加到選區(qū)（Selection）當(dāng)中烫饼。
// 將剛剛選中的 p 標(biāo)簽文本添加到 selection
selection.addRange(range);
// execCommand 中的 copy 方法拷貝剛剛選到的內(nèi)容
document.execCommand('copy');
// 重新初始化區(qū)域?qū)ο?range
selection.removeAllRanges();
}, false);
CSS 代碼
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding: 20px;
font: normal 16px sans-serif;
color: #555;
}
p{
margin-bottom: 20px;
}
button{
padding: 8px 12px;
margin-bottom: 20px;
}
textarea {
display: block;
padding: 10px;
width: 400px;
height: 120px;
}
下方動(dòng)圖是功能的演示效果猎塞。只要點(diǎn)擊復(fù)制按鈕，就可以復(fù)制到上面的格言杠纵。不用使用 ctrl + c 和用鼠標(biāo)選中再右鍵復(fù)制那么麻煩了荠耽。
希望分享的內(nèi)容對(duì)大家有幫助，感謝你們的關(guān)注與支持淡诗。
點(diǎn)個(gè)關(guān)注骇塘，就是一份支持伊履。
