Javascript高级编程学习笔记（76）—— 表单（4）选择文本

文本框脚本

在HTML中文本框有两种实现方式：

1. <input>
2. <textarea>

这两种实现方式虽然在多数情况下表现一致，但是两者之间仍存在许多重要区别

对于<input>来说，如果需要展现一个文本框则需要将 type 特性设置为“text”

通过设置其 size 特性可以指定文本框中能够显示的最大字符数

通过 value 特性则可以设置文本框的初始值

通过设置 maxlength 特性可以设置文本框接收的最大字符数

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

如上方代码所示，创建了一个能显示25个字符，最多接收50个字符，初始值为 initial value 的文本框

相对于<input>，<textarea>元素则会呈现一个多行文本框，要指定文本框的大小则通过两个特性来进行限制

• cols：文本框的字符列数
• rows：文本框的字符行数

而初始值的设值则需要将内容放在两个标签之间

如：

<textarea>initial value</textarea>

无论这两种展现方法在表现形式上存在多大的区别，他们都会将用户输入的值保存在 value 特性中

但是需要注意的是：最好不要使用DOM方法来获取或者修改值（即通过setAttribute()等方法来修改特性的值），因为对 value 特性的修改不一定会展示在DOM中

选择文本

上述两种文本框都支持 select() 方法，这个方法用于选择文本框中的文本

在主流浏览器中，对文本框调用 select() 方法时会将焦点设置为文本框

该方法不接受参数，可以在任何时候被调用

调用时会选中文本框中的所有文本

通常来说这种方法用于让文本框获得焦点时自动选中所有文本

代码如下：

var textarea = document.getElementsByTagName('textarea')[0];

textarea.onfocus = function(){
    this.select();
}

这种做法可以提供较好的用户体验

select事件

与select方法对应的事件是 select 事件

在选择了文本框中的文本时就会触发该事件

不过在不同的浏览器中该事件的触发机制有所不同

一部分浏览器要在用户选择了文本，且释放鼠标后才会触发

剩余的部分（以IE8以下的低版本IE为主）只要选择了文本就会触发

取得文本

虽然通过 select 事件我们可以知道用户选择了文本

但是无法获取用户选择的文本内容，所以HTML5对此进行了拓展

对文本框添加了如下属性：

• selectionStart：选中文本开头的偏移量（从0开始）
• selectionEnd：选中文本末尾的偏移量

通过这两个属性我们就可以获取用户选中的文本

textarea.addEventLinstener("select",function(event){
    return this.value.substring(this.selectionStart,this.selectionEnd);
},false)

选择部分文本

HTML5也为选择文本框中的部分文本提供了解决方案

即 setSelectionRage（）方法

该方法接收两个参数：第一个字符串的偏移量，最后一个字符的偏移量，类似于上面的 selectionStart 和 selectionEnd

但是对于低版本的IE要实现上述功能则需要使用范围

所以该方法的跨浏览器实现如下：

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

    textbox.focus();
}