JavaScript高级程序设计53.pdf

共有的表单字段方法

每个表单字段都有两个方法：focus()和blur()，其中focus()用于将浏览器焦点设置到表单字段，激活表单字段。可以侦听页面的load事件

EventUtil.addHandler(window,"load",function(event){

　　　　　　document.forms[0].elements[0].focus();

　　　　});

要注意的是，如果第一个表单字段是隐藏的，使用以上代码会导致错误

HTML5为表单字段新增了一个autofocus属性，不用Javascript就可以自动将焦点移动到相应字段

<input type="text" autofocus>

可以检测是否设置了该属性

if(element.autofocus!==true){

　　　　　　element.focus();console.log("JS focus");

　　　　}

autofocus是一个布尔值属性，在支持它的浏览器中是true，不支持的浏览器中是空字符串

blur()作用是从元素中移走焦点

document.forms[0].elements[0].blur();

共有表单字段事件

除了鼠标事件、键盘事件、更改和HTML事件，所有表单字段都支持下列3个事件

blur：当前字段失去焦点时触发

change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发；对于<select>元素，在其选项改变时触发

focus：当前字段获得焦点时触发

文本框脚本

有两种方式表现文本框：<input>元素的单行文本框，<textarea>的多行文本框

要表现文本框<input>元素的type特性设置为“text”，size特性设置显示的字符数，value特性设置初始值，maxlength特性设置文本框可以接受的最大字符数

<input type="text" size="25" maxlength="50" value="initial value">

对于<textarea>元素，rows设置文本框字符行数，cols设置文本框字符列数，而初始值必须放在<textarea></textarea>之间

<textarea rows="25" cols="5">initial value</textarea>

<textarea>不能指定最大字符数

<textarea>和<input>都会将用户输入的内容保存在value中，可以读取和设置文本框的值

alert(textbox.value);

选择文本

上述两种文本框都支持select()方法，用于选择文本框中的所有文本，在调用select()方法时，浏览器（Opera除外）会将焦点设置到文本框中，该方法不接受参数，可以在任何时候被调用

textbox.select();

实例：只要获得了焦点，就会选中所有文本

EventUtil.addHandler(textbox,"focus",function(){

　　　　　　event.EventUtil.getEvent(event);

　　　　　　var target=EventUtil.getTarget(event);

　　　　　　target.select();

　　　　});

选择（select）事件

与select()方法对应的是select事件，在选择了文本框中的文本时，就会触发select事件，现代浏览器在释放鼠标时触发事件，IE8及之前版本在开始选择文本时就会触发事件，调用select()方法也会触发事件

取得选择的文本

HTML5通过一些拓展方案顺利地取得选择的文本，selectionStart和selectionEnd，这两个属性保存基于0的数值，表示所选择文本的范围（文本开头和结尾的偏移量）

function getSelectedText(textbox){

　　　　　　return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);

　　　　}

现代浏览器都支持这两个属性，IE8及之前版本不支持这两个属性，提供了另一种解决方案：

有一个document.selection对象，保存着用户在整个文档范围内选择的文本信息，也就是说不知道用户选择了哪一部分的文本，必须创建一个范围，然后再将文本从其中提取出来

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;

　　　}

}

选择部分文本

HTML5也为选择文本框中的部分文本提供了解决方案，除了select()方法以外，所有文本框都有一个setSelectionRange()方法。接收两个参数，要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引（类似substring()方法）

textbox.value="Hello world!"

textbox.setSelectionRange(1,3);　　//"el"

现代浏览器支持以上方法，IE8及之前版本支持使用范围选择部分文本（第12章讨论过）：首先使用createTextRange()方法创建一个范围，使用collapse()方法将范围折叠到文本框开始位置，moveStart()将范围起点和终点移动到相同位置，再给moveEnd()传入要选择的字符总数即可，最后一步就是使用范围的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();

跨浏览器编程，接收3个参数，要操作的文本框、要选择第一个字符的索引和要选择最后一个字符的索引

function selectText(textbox,startIndex,stopIndex){

　　　　　　if(textbox.setSelectionRange){

　　　　　　　　textbox.setSelectionRange(startIndex,stopIndex);

　　　　　　}else if(textbox.createTextRange){

　　　　　　　　range.collapse(true);

　　　　　　　　range.moveStart("character",startIndex);

　　　　　　　　range.moveEnd("character",textbox.stopIndex-startIndex);

　　　　　　　　range.select();

　　　　　　}

　　　　textbox.focus();

　　}

textbox.value="Hello world!";

selectText(textbox,0,3);　　//选择前3个字符