在HTML中，有兩種方式來表現(xiàn)文本框：
- 使用<input>元素的單行文本框
- 使用<textarea>的多行文本框。
<!--
文本框：
type特性為“text”
size特性：指定文本框中能顯示的字符數(shù)
value特性：設(shè)置文本框的初始值
maxlength特性：指定文本框可以接受的最大字符數(shù)
-->
<input text="text" size="25" maxlength="50" value="initial value" />
<!--
多行文本框：
rows，cols特性：指定文本框的大小，其中rows指定文本框的字符行數(shù)，cols指定文本框的字符列數(shù)
初始值必須放在<textarea></textarea>之間
不能在HTML中指定最大字符數(shù)
-->
<textarea rows="5" cols="25"></textarea>
這兩種文本框都會將用戶輸入的內(nèi)容保存在value屬性中。可以通過這個屬性讀取和設(shè)置文本框的值。
var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);
textbox.value = "some new value";
選擇文本
1、這個方法用于選擇文本框中的所有文本。
2、在調(diào)用select()方法時，大多數(shù)瀏覽器（Opera除外）都會將焦點設(shè)置到文本框中。
3、這個方法不接收參數(shù)，可以在任何時候被調(diào)用。
var textbox = document.forms[0].elements["textbox1"];
textbox.select();
在文本框獲得焦點時選擇其所有文本，特別是在文本框包含默認值的時候。這樣做可以染用戶不必一個一個地刪除文本。
EventUtil.addHandler(textbox,"focus",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});
選擇（select）事件
- 在選擇了文本框中的文本時，就會觸發(fā)select事件。
- 在調(diào)用select()方法時也會觸發(fā)select事件。
var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox,"select",function(event){
alert("Text selected:"+textbox.value);
});
取得選擇的文本
通過select事件我們可以知道用戶什么時候選擇了文本，但是不知道用戶選擇了什么文本。HTML5 通過一些擴展方案解決了這個問題，以便更順利的取得選擇的文本。
該規(guī)范采取的辦法：添加兩個屬性，selectionStart和selectionEnd。這兩個屬性中保存的是基于0的數(shù)值，表示所選擇文本的范圍（即文本選區(qū)開頭和結(jié)尾的偏移量）。
//取得用戶在文本框中選擇的文本
//IE9+、Firefox、Safari、Chrome和Opera支持這兩個屬性。
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}
IE8 及更早版本中有一個document.selection對象，其中保存著用戶在整個文檔范圍內(nèi)選擇的文本信息。也就是說，無法確定用戶選擇的是頁面中哪個部位的文本。不過，在與select事件一起使用的時候，可以假定是用戶選擇了文本框中的文本，因而觸發(fā)了該事件。要取得選擇的文本，首先必須要創(chuàng)建一個范圍，然后再講文本從中提取出來。
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;
}
}
選擇部分文本
所有文本框都有一個setSelectionRange()方法。
param：param1——要選擇的第一個字符的索引
param2——要選擇的最后一個字符之后的字符的索引
//IE9+、Firefox、Safari、Chrome和Opera支持這種方案。
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
IE8 及更早的版本支持使用范圍選擇部分文本。
要選擇的文本框中的部分文本：
- 首先使用createTextRange()方法創(chuàng)建一個范圍，并將其放在恰當?shù)奈恢蒙稀?/li>
- 使用collapse()將范圍折疊到文本框的開始位置。
- 再使用moveStart()和moveEnd()這兩個范圍方法將范圍移動到位。此時，moveStart()將范圍的起點和終點移動到了相同的位置，只要給moveEnd()傳入要選擇的字符總數(shù)即可。
- 最后，使用范圍的select()方法選擇文本。
textbox.value = "Hello world!";
var range = textbox.createTextRange();
//選擇所有文本
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", textbox.value.length); //"Hello world"
range.select(); //"Hello world!"
//選擇前3個字符
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", 3);
range.select(); //"Hel"
//選擇第4個到第6個字符
range.collapse(true);
range.moveStart("character", 4);
range.moveEnd("character", 3);
range.select(); //"o w"
為了跨瀏覽器編程，可以將上述兩種方案組合起來。
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();
}
