有個很常見的生活場景是：我們在網(wǎng)頁上閱讀一篇文章耗跛，移動鼠標，框選一段文字攒发，這個時候文字有了藍色背景调塌，點鼠標右鍵，選擇復制惠猿，就可以把選中的文字復制到剪貼板中羔砾。 其實這一小小的行為在 JavaScript 中涉及到如下一些術(shù)語：
相關(guān)術(shù)語
-
錨點（anchor）
錨點指的是一個選區(qū)的起始點，這里的錨點不同于HTML中的錨點鏈接。當我們使用鼠標框選一個區(qū)域的時候蜒茄，錨點就是我們鼠標按下瞬間的那個點。在用戶拖動鼠標時餐屎，錨點是不會變的檀葛。
-
焦點（focus）
選區(qū)的焦點是該選區(qū)的終點，當您用鼠標框選一個選區(qū)的時候腹缩，焦點是你的鼠標松開瞬間所記錄的那個點屿聋。隨著用戶拖動鼠標，焦點的位置會隨著改變藏鹊。
-
范圍（range）
范圍俗稱拖藍润讥，用來表示用戶選中的文本區(qū)域，即從錨點到焦點的這一段文本區(qū)域盘寡。
HTMLInputElement 的三種方法
-
選中文本域中的內(nèi)容
HTMLInputElement.select()
英文解釋為：Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.
剛認識這個方法的時候楚殿，下意識的覺得應該會返回選中的文字才對，然而并沒有竿痰，這個方法沒有返回值脆粥，僅僅只是選中了文字而已。
-
在文本域上設(shè)置焦點
HTMLInputElement.focus()
英文解釋為：Focus on input; keystrokes will subsequently go to this element.
-
從文本域上移開焦點
HTMLInputElement.blur()
英文解釋為：Removes focus from input; keystrokes will subsequently go nowhere.
值得注意的是以上三種方法都只面向 <input> 和 <textarea> 結(jié)點影涉，并且都沒有返回值变隔。
document.execCommand
文檔對象的 execCommand方法允許運行命令來操縱可編輯區(qū)域的內(nèi)容，具體可以查看這里. 下面僅介紹 copy 這個方法：
bool = document.execCommand(copy)
這個方法指拷貝當前選中內(nèi)容到剪貼板蟹倾，返回值為一個 bool 值匣缘， 如果返回值為 false 則表示操作不被支持或未被啟用。
很遺憾的是這個方法的瀏覽器兼容性一般鲜棠，IE 僅支持 8 以上的版本肌厨。
通過以上幾個方法我們已經(jīng)可以實現(xiàn)簡單的復制粘貼功能了：
<input type="text" class="box-text" value="choose me!" />
<button class="bt-copy" >copy</button>
<script>
$('.bt-copy').click(function(){
var copyTarget = $('.box-text');
copyTarget.select();
try {
document.execCommand('copy');
}
catch (err) {
alert('請使用CTRL+C,CTRL+V來復制粘貼~');
}
copyTarget.blur();
})
</script>
短短幾行代碼就實現(xiàn)了復制粘貼的功能，但仍然有改進的地方：
- 增加除 <input> 和 <textarea> 外的結(jié)點的支持岔留，可以借鑒 select.js 的實現(xiàn)方法夏哭。
- 對不支持
document.execCommand('copy')的瀏覽器使用 ZeroClipboard 作為 fallback。
---------------------------------------- 2017/5/5日 更 ----------------------------------------
之前說過献联， .select() 方法僅支持 <input> 和 <textarea> 元素竖配，發(fā)現(xiàn)一個更好的辦法用于解決這個問題：
- 用 js 生成一個隱藏的
<textarea>元素，追加到 dom 里面里逆。 - 把需要復制的文本賦值給剛生成的
<textarea>元素进胯。 - 使用原生的方法進行選中和復制的操作。
- 最后記得在DOM中移除
<textarea>元素原押。
var textArea = document.createElement('textarea');
textArea.style.position = 'fixed';
textArea.style.left = '-10000px';
textArea.style.top = '-10000px';
document.body.appendChild(textArea);
textArea.value = this.copyText;
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
