【JavaScript学习】表单脚本：文本框脚本

在HTML中，有两种方式来表现文本框：

• 使用<input>元素的单行文本框
• 使用<textarea>的多行文本框。

<!--
文本框：
    type特性为“text”
    size特性：指定文本框中能显示的字符数
    value特性：设置文本框的初始值
    maxlength特性：指定文本框可以接受的最大字符数
-->
<input text="text" size="25" maxlength="50" value="initial value" />

<!--
多行文本框：
    rows，cols特性：指定文本框的大小，其中rows指定文本框的字符行数，cols指定文本框的字符列数
    初始值必须放在<textarea></textarea>之间
    不能在HTML中指定最大字符数
-->
<textarea rows="5" cols="25"></textarea>

这两种文本框都会将用户输入的内容保存在value属性中。可以通过这个属性读取和设置文本框的值。

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

textbox.value = "some new value";

选择文本

1、这个方法用于选择文本框中的所有文本。
2、在调用select()方法时，大多数浏览器（Opera除外）都会将焦点设置到文本框中。
3、这个方法不接收参数，可以在任何时候被调用。

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）事件

• 在选择了文本框中的文本时，就会触发select事件。
• 在调用select()方法时也会触发select事件。

var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox,"select",function(event){
    alert("Text selected:"+textbox.value);
});

取得选择的文本

通过select事件我们可以知道用户什么时候选择了文本，但是不知道用户选择了什么文本。HTML5 通过一些扩展方案解决了这个问题，以便更顺利的取得选择的文本。

该规范采取的办法：添加两个属性，selectionStart和selectionEnd。这两个属性中保存的是基于0的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）。

//取得用户在文本框中选择的文本
//IE9+、Firefox、Safari、Chrome和Opera支持这两个属性。
function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}

IE8 及更早版本中有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息。也就是说，无法确定用户选择的是页面中哪个部位的文本。不过，在与select事件一起使用的时候，可以假定是用户选择了文本框中的文本，因而触发了该事件。要取得选择的文本，首先必须要创建一个范围，然后再讲文本从中提取出来。

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 及更早的版本支持使用范围选择部分文本。
要选择的文本框中的部分文本：

1. 首先使用createTextRange()方法创建一个范围，并将其放在恰当的位置上。
2. 使用collapse()将范围折叠到文本框的开始位置。
3. 再使用moveStart()和moveEnd()这两个范围方法将范围移动到位。此时，moveStart()将范围的起点和终点移动到了相同的位置，只要给moveEnd()传入要选择的字符总数即可。
4. 最后，使用范围的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();
}