在 HTML 中，有兩種方式來(lái)表現(xiàn)文本框：一種是使用<input>元素的單行文本框，另一種是使用 <textarea>的多行文本框。這兩個(gè)控件非常相似，而且多數(shù)時(shí)候的行為也差不多。不過(guò)，它們之間仍 然存在一些重要的區(qū)別。

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

選擇文本

上述兩種文本框都支持 select()方法，這個(gè)方法用于選擇文本框中的所有文本。在調(diào)用 select() 方法時(shí)，大多數(shù)瀏覽器（Opera 除外）都會(huì)將焦點(diǎn)設(shè)置到文本框中。這個(gè)方法不接受參數(shù)，可以在任何 時(shí)候被調(diào)用。

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

在文本框獲得焦點(diǎn)時(shí)選擇其所有文本，這是一種非常常見(jiàn)的做法，特別是在文本框包含默認(rèn)值的時(shí) 候。因?yàn)檫@樣做可以讓用戶不必一個(gè)一個(gè)地刪除文本。

​選擇（select）事件

與 select()方法對(duì)應(yīng)的，是一個(gè) select 事件。在選擇了文本框中的文本時(shí)，就會(huì)觸發(fā) select 事件。不過(guò)，到底什么時(shí)候觸發(fā) select 事件，還會(huì)因?yàn)g覽器而異。

取得選擇的文本

雖然通過(guò) select 事件我們可以知道用戶什么時(shí)候選擇了文本，但仍然不知道用戶選擇了什么文本。HTML5 通過(guò)一些擴(kuò)展方案解決了這個(gè)問(wèn)題，以便更順利地取得選擇的文本。該規(guī)范采取的辦法是添加 兩個(gè)屬性：selectionStart 和 selectionEnd。這兩個(gè)屬性中保存的是基于 0 的數(shù)值，表示所選擇 文本的范圍（即文本選區(qū)開(kāi)頭和結(jié)尾的偏移量）。因此，要取得用戶在文本框中選擇的文本，可以使用 如下代碼。

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

　　IE8 及更早的版本中有一個(gè) document.selection 對(duì)象，其中保存著用戶在整個(gè)文檔范圍內(nèi)選擇 的文本信息；兼容IE8的寫(xiě)法

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

選擇部分文本

現(xiàn)在除 select()方法之外，所有文本框都有一個(gè) setSelectionRange() 方法。這個(gè)方法接收兩個(gè)參數(shù)：要選擇的第一個(gè)字符的索引和要選擇的最后一個(gè)字符之后的字符的索引 （類似于 substring()方法的兩個(gè)參數(shù)）。

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

E8 及更早版本支持使用范圍選擇部分文本。要選擇文本框中的部分文本，必須 首先使用 IE 在所有文本框上提供的 createTextRange()方法創(chuàng)建一個(gè)范圍，并將其放在恰當(dāng)?shù)奈恢?上。然后，再使用 moveStart()和 moveEnd()這兩個(gè)范圍方法將范圍移動(dòng)到位。不過(guò)，在調(diào)用這兩個(gè) 方法以前，還必須使用 collapse()將范圍折疊到文本框的開(kāi)始位置。此時(shí)，moveStart()將范圍的起 點(diǎn)和終點(diǎn)移動(dòng)到了相同的位置，只要再給 moveEnd()傳入要選擇的字符總數(shù)即可。最后一步，就是使 用范圍的 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 個(gè)字符 "Hel"
range.collapse(true); 
range.moveStart("character", 0); 
range.moveEnd("character", 3); 
range.select();
​
//選擇第 4 到第 6 個(gè)字符 "o w"
range.collapse(true); 
range.moveStart("character", 4); 
range.moveEnd("character", 3); 
range.select();

兼容IE8的寫(xiě)法

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 是第一個(gè)支持與剪貼板相關(guān)事件，以及通過(guò) JavaScript 訪問(wèn)剪貼板數(shù)據(jù)的瀏覽器。HTML 5 后來(lái)也把剪貼板事件納入了規(guī)范。

• beforecopy：在發(fā)生復(fù)制操作前觸發(fā) 。
• copy：在發(fā)生復(fù)制操作時(shí)觸發(fā)。
• beforecut：在發(fā)生剪切操作前觸發(fā)。
• cut：在發(fā)生剪切操作時(shí)觸發(fā)。
• beforepaste：在發(fā)生粘貼操作前觸發(fā)。
• paste：在發(fā)生粘貼操作時(shí)觸發(fā)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論