有個很常見的生活場景是：我們在網頁上閱讀一篇文章，移動鼠標，框選一段文字，這個時候文字有了藍色背景，點鼠標右鍵，選擇復制，就可以把選中的文字復制到剪貼板中。 其實這一小小的行為在 JavaScript 中涉及到如下一些術語：

相關術語

錨點(anchor)

錨點指的是一個選區的起始點，這里的錨點不同于HTML中的錨點鏈接。當我們使用鼠標框選一個區域的時候，錨點就是我們鼠標按下瞬間的那個點。在用戶拖動鼠標時，錨點是不會變的。

焦點(focus)

選區的焦點是該選區的終點，當您用鼠標框選一個選區的時候，焦點是你的鼠標松開瞬間所記錄的那個點。隨著用戶拖動鼠標，焦點的位置會隨著改變。

范圍(range)

范圍俗稱拖藍，用來表示用戶選中的文本區域，即從錨點到焦點的這一段文本區域。

HTMLInputElement 的三種方法

選中文本域中的內容

HTMLInputElement.select()

英文解釋為：Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.

剛認識這個方法的時候，下意識的覺得應該會返回選中的文字才對，然而并沒有，這個方法沒有返回值，僅僅只是選中了文字而已。

在文本域上設置焦點

HTMLInputElement.focus()

英文解釋為：Focus on input; keystrokes will subsequently go to this element.

從文本域上移開焦點

HTMLInputElement.blur()

英文解釋為：Removes focus from input; keystrokes will subsequently go nowhere.

值得注意的是以上三種方法都只面向 和 結點，并且都沒有返回值。

document.execCommand

文檔對象的 execCommand方法允許運行命令來操縱可編輯區域的內容，具體可以查看這里. 下面僅介紹 copy 這個方法：

bool = document.execCommand(copy)

這個方法指拷貝當前選中內容到剪貼板，返回值為一個 bool 值， 如果返回值為 false 則表示操作不被支持或未被啟用。

很遺憾的是這個方法的瀏覽器兼容性一般，IE 僅支持 8 以上的版本。

通過以上幾個方法我們已經可以實現簡單的復制粘貼功能了：

copy

$('.bt-copy').click(function(){

var copyTarget = $('.box-text');

copyTarget.select();

try {

document.execCommand('copy');

}

catch (err) {

alert('請使用CTRL+C,CTRL+V來復制粘貼~');

}

copyTarget.blur();

})

短短幾行代碼就實現了復制粘貼的功能，但仍然有改進的地方：

增加除 和 外的結點的支持，可以借鑒 select.js 的實現方法。

對不支持 document.execCommand('copy') 的瀏覽器使用 ZeroClipboard 作為 fallback。

---------------------------------------- 2017/5/5日 更 ----------------------------------------

之前說過， .select() 方法僅支持 和 元素，發現一個更好的辦法用于解決這個問題：

用 js 生成一個隱藏的 元素，追加到 dom 里面。

把需要復制的文本賦值給剛生成的 元素。

使用原生的方法進行選中和復制的操作。

最后記得在DOM中移除 元素。

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);

總結

以上是生活随笔為你收集整理的html文本框监听粘贴,JavaScript实现复制粘贴的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。