在 HTML 中，有兩種方式來表現文字框：一種是使用<input>元素的單行文字框，另一種是使用 <textarea>的多行文字框。這兩個控制元件非常相似，而且多數時候的行為也差不多。不過，它們之間仍 然存在一些重要的區別。

相對而言，<textarea>元素則始終會呈現為一個多行文字框。要指定文字框的大小，可以使用 rows 和 cols 特性。其中，rows 特性指定的是文字框的字元行數，而 cols 特性指定的是文字框的字元列數 （類似於 <inpu> 元素的 size 特性）。與 <input> 元素不同， <textarea> 的初始值必須要放在 <textarea>和</textarea>之間。

選擇文字

上述兩種文字框都支援 select()方法，這個方法用於選擇文字框中的所有文字。在呼叫 select() 方法時，大多數瀏覽器（Opera 除外）都會將焦點設定到文字框中。這個方法不接受引數，可以在任何 時候被呼叫。

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

在文字框獲得焦點時選擇其所有文字，這是一種非常常見的做法，特別是在文字框包含預設值的時 候。因為這樣做可以讓使用者不必一個一個地刪除文字。

​選擇（select）事件

與 select()方法對應的，是一個 select 事件。在選擇了文字框中的文字時，就會觸發 select 事件。不過，到底什麼時候觸發 select 事件，還會因瀏覽器而異。

取得選擇的文字

雖然通過 select 事件我們可以知道使用者什麼時候選擇了文字，但仍然不知道使用者選擇了什麼文字。HTML5 通過一些擴充套件方案解決了這個問題，以便更順利地取得選擇的文字。該規範採取的辦法是新增 兩個屬性：selectionStart 和 selectionEnd。這兩個屬性中儲存的是基於 0 的數值，表示所選擇 文字的範圍（即文字選區開頭和結尾的偏移量）。因此，要取得使用者在文字框中選擇的文字，可以使用 如下程式碼。

function getSelectedText(textbox){
 return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}

　　IE8 及更早的版本中有一個 document.selection 物件，其中儲存著使用者在整個文件範圍內選擇 的文字資訊；相容IE8的寫法

function getSelectedText(textbox){ 
 if (typeof textbox.selectionStart == "number"){ 
  return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd); 
 } else if (document.selection){ 
  return document.selection.createRange().text;
 } 
}

選擇部分文字

現在除 select()方法之外，所有文字框都有一個 setSelectionRange() 方法。這個方法接收兩個引數：要選擇的第一個字元的索引和要選擇的最後一個字元之後的字元的索引 （類似於 substring()方法的兩個引數）。

textbox.value = "Hello world!"
//選擇所有文字
textbox.setSelectionRange(0,textbox.value.length); //"Hello world!"
//選擇前 3 個字元
textbox.setSelectionRange(0,3); //"Hel"
//選擇第 4 到第 6 個字元
textbox.setSelectionRange(4,7); //"o w"

E8 及更早版本支援使用範圍選擇部分文字。要選擇文字框中的部分文字，必須 首先使用 IE 在所有文字框上提供的 createTextRange()方法建立一個範圍，並將其放在恰當的位置 上。然後，再使用 moveStart()和 moveEnd()這兩個範圍方法將範圍移動到位。不過，在呼叫這兩個 方法以前，還必須使用 collapse()將範圍摺疊到文字框的開始位置。此時，moveStart()將範圍的起 點和終點移動到了相同的位置，只要再給 moveEnd()傳入要選擇的字元總數即可。最後一步，就是使 用範圍的 select()方法選擇文字，如下面的例子所示。

textbox.value = "Hello world!";
var range = textbox.createTextRange();
//選擇所有文字 "Hello world!"
range.collapse(true); range.moveStart("character",0); 
range.moveEnd("character",textbox.value.length); 
range.select();
​
//選擇前 3 個字元 "Hel"
range.collapse(true); 
range.moveStart("character",3); 
range.select();
​
//選擇第 4 到第 6 個字元 "o w"
range.collapse(true); 
range.moveStart("character",4); 
range.moveEnd("character",3); 
range.select();

相容IE8的寫法

function selectText(textbox,startIndex,stopIndex){
 if (textbox.setSelectionRange){ 
  textbox.setSelectionRange(startIndex,stopIndex); 
 } else if (textbox.createTextRange){ 
  var range = textbox.createTextRange(); 
  range.collapse(true); 
  range.moveStart("character",startIndex); 
  range.moveEnd("character",stopIndex - startIndex); 
  range.select();
  }
  textbox.focus();
}

操作剪貼簿

IE 是第一個支援與剪貼簿相關事件，以及通過 JavaScript 訪問剪貼簿資料的瀏覽器。HTML 5 後來也把剪貼簿事件納入了規範。

• beforecopy：在發生複製操作前觸發 。
• copy：在發生複製操作時觸發。
• beforecut：在發生剪下操作前觸發。
• cut：在發生剪下操作時觸發。
• beforepaste：在發生貼上操作前觸發。
• paste：在發生貼上操作時觸發。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。