南順網絡
JavaScript複制內(nèi)容到剪貼闆的(de)兩種常用方法
查了一(yī)下萬能的(de)Google，現在常見的(de)方法主要是以下兩種：
第三方庫：clipboard.js
原生方法：document.execCommand()
分别來看看這兩種方法是如(rú)何使用的(de)。
clipboard.js
這是clipboard的(de)官網：https://clipboardjs.com/，看起來就是這麽的(de)簡單。
引用
直接引用：
<script src="dist/clipboard.min.js"></script>
包： npm install clipboard --save ，然後 import Clipboard from 'clipboard';
使用
從輸入框複制
現在頁面上有一(yī)個 <input> 标簽，我們需要複制其中的(de)內(nèi)容，我們可(kě)以這樣做(zuò)：
1 2 | <input id="demoInput" value="hello world"><button class="btn" data-clipboard-target="#demoInput">點我複制</button> |
1 2 | import Clipboard from 'clipboard';const btnCopy = new Clipboard('btn'); |
注意到，在 <button> 标簽中添加了一(yī)個 data-clipboard-target 屬性，它的(de)值是需要複制的(de) <input> 的(de) id，顧名思義是從整個标簽中複制內(nèi)容。
直接複制
有的(de)時候，我們并不希望從 <input> 中複制內(nèi)容，僅僅是直接從變量中取值。如(rú)果在 Vue 中我們可(kě)以這樣做(zuò)：
<button class="btn" :data-clipboard-text="copyValue">點我複制</button>
1 2 3 | import Clipboard from 'clipboard';const btnCopy = new Clipboard('btn');this.copyValue = 'hello world'; |
事件
有的(de)時候我們需要在複制後做(zuò)一(yī)些事情，這時候就需要回調函數的(de)支持。
在處理(lǐ)函數中加入以下代碼：
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 複制成功後執行的(de)回調函數clipboard.on('success', function(e) { console.info('Action:', e.action); // 動作名稱，比如(rú)：Action: copy console.info('Text:', e.text); // 內(nèi)容，比如(rú)：Text：hello word console.info('Trigger:', e.trigger); // 觸發元素：比如(rú)：<button class="btn" :data-clipboard-text="copyValue">點我複制</button> e.clearSelection(); // 清除選中內(nèi)容});// 複制失敗後執行的(de)回調函數clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger);}); |
小結
文檔中還提到，如(rú)果在單頁面中使用 clipboard ，為(wèi)了使得生命周期管理(lǐ)更加的(de)優雅，在使用完之後記得 btn.destroy() 銷毀一(yī)下。
clipboard 使用起來是不是很簡單。但是，就為(wèi)了一(yī)個 copy 功能就使用額外的(de)第三方庫是不是不夠優雅，這時候該怎麽辦？那就用原生方法實現呗。
document.execCommand()方法
先看看這個方法在 MDN 上是怎麽定義的(de)：
which allows one to run commands to manipulate the contents of the editable region.
意思就是可(kě)以允許運行命令來操作可(kě)編輯區域的(de)內(nèi)容，注意，是可(kě)編輯區域。
定義
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
方法返回一(yī)個 Boolean 值，表示操作是否成功。
aCommandName ：表示命令名稱，比如(rú)： copy, cut 等（更多命令見命令）；
aShowDefaultUI：是否展示用戶界面，一(yī)般情況下都是 false；
aValueArgument：有些命令需要額外的(de)參數，一(yī)般用不到；
兼容性
這個方法在之前的(de)兼容性其實是不太好的(de)，但是好在現在已經基本兼容所有主流浏覽器了，在移動端也可(kě)以使用。
使用
從輸入框複制
現在頁面上有一(yī)個 <input> 标簽，我們想要複制其中的(de)內(nèi)容，我們可(kě)以這樣做(zuò)：
1 2 | <input id="demoInput" value="hello world"><button id="btn">點我複制</button> |
js代碼
1 2 3 4 5 6 7 8 9 | const btn = document.querySelector('#btn');btn.addEventListener('click', () => { const input = document.querySelector('#demoInput'); input.select(); if (document.execCommand('copy')) { document.execCommand('copy'); console.log('複制成功'); }}) |
其它地(dì)方複制
有的(de)時候頁面上并沒有 <input> 标簽，我們可(kě)能需要從一(yī)個 <div> 中複制內(nèi)容，或者直接複制變量。
還記得在 execCommand() 方法的(de)定義中提到，它隻能操作可(kě)編輯區域，也就是意味着除了 <input>、<textarea> 這樣的(de)輸入域以外，是無法使用這個方法的(de)。
這時候我們需要曲線救國。
<button id="btn">點我複制</button>
js代碼
1 2 3 4 5 6 7 8 9 10 11 12 | const btn = document.querySelector('#btn');btn.addEventListener('click',() => { const input = document.createElement('input'); document.body.appendChild(input); input.setAttribute('value', '聽說你想複制我'); input.select(); if (document.execCommand('copy')) { document.execCommand('copy'); console.log('複制成功'); } document.body.removeChild(input);}) |
算是曲線救國成功了吧(ba)。在使用這個方法時，遇到了幾個坑。
遇到的(de)坑
在Chrome下調試的(de)時候，這個方法時完美運行的(de)。然後到了移動端調試的(de)時候，坑就出來了。
對，沒錯，就是你，ios。。。
1、點擊複制時屏幕下方會出現白屏抖動，仔細看是拉起鍵盤又瞬間收起
知道(dào)了抖動是由于什麽産生的(de)就比較好解決了。既然是拉起鍵盤，那就是聚焦到了輸入域，那隻要讓輸入域不可(kě)輸入就好了，在代碼中添加 input.setAttribute('readonly', 'readonly'); 使這個 <input> 是隻讀的(de)，就不會拉起鍵盤了。
2、無法複制
這個問題是由于 input.select() 在ios下并沒有選中全部內(nèi)容，我們需要使用另一(yī)個方法來選中內(nèi)容，這個方法就是 input.setSelectionRange(0, input.value.length);。
完整代碼如(rú)下：
1 2 3 4 5 6 7 8 9 10 11 12 13 | const btn = document.querySelector('#btn');btn.addEventListener('click',() => { const input = document.createElement('input'); input.setAttribute('readonly', 'readonly'); input.setAttribute('value', 'hello world'); document.body.appendChild(input); input.setSelectionRange(0, 9999); if (document.execCommand('copy')) { document.execCommand('copy'); console.log('複制成功'); } document.body.removeChild(input);}) |
總結
以上就是關于JavaScript如(rú)何實現複制內(nèi)容到剪貼闆，附上幾個鏈接：
編輯:--ns868
