版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处 http://xinyistudio.vicp.net/ 和作者信息及本声明

（ 本文适合中高级读者 ）

译者序：

为了获取用户更多的信息，你不惜网站页面中产生了大量的文本框，选单，列表框，当用户看到如此繁多的需要输入或选择项，很有可能为此产生厌倦并最终离开你的网站。

采用Javascript对输入文本框更好的设计，能够尽可能的避免上述问题，希望本篇译文能够对你在web页面的开发设计当中有所帮助，译文翻译错误难免，望大家批评指正。

今天人们最不愿意面对的就是填写大量的表单(form)，特别是那些需要敲入字符的文本框（就是我们经常用的 <input type=text> html 标记， 以后为方便就称为文本框）。

微软在 outlook 中结合了可自动完成输入的文本框 -- 文本框检查由用户输入的少量的字符，然后从给定的下拉列表中给出一个建议的词。同样的，当你开始在 web 地址栏中填入一个 url 地址，你的 Web 浏览器会给你推荐一个 url 的下拉列表单。

在这篇教程中用了一点点 Javascript 的控制，我们将创建具有与 IE （版本 5.5 或更高）

和 Mozilla （版本 1.0 或更高）浏览器相类似行为的输入文本框。

Ø 简单的浏览器检测

－－－－－－－－－－－

首先，我们需要做一个浏览器的检测，下面是一些简单的代码（这个过程可以用你自已写的代码替代它）

var isOpera = navigator.userAgent.indexOf(“Opera”) > -1;

var isIE = navigator.userAgent.indexOf(“MSIE”) > 1 && !isOpera;

var isMoz = navigator.userAgent.indexOf(“Mozilla/5.”) == 0 && !isOpera;

这代码很明显不是非常完善，但它看来对于我们要达到的目的已足矣。让我们开始这个项目吧。

Ø 选择文本框

－－－－－－－－－――

在这过程的第一步是创建一个方法，这个方法可以在一个文本框中选择确定的文本数。我将

调用这个方法 textboxSelect() , 它有三个参数，第一个参数是让这个方法作用于的对象： oTextbox ；第二个参数是非必选项，它指示了选择的起始位置（如果这个参数被忽略，那么全部的文本都被选择）；第三个参数，同样是非必选项，指示了选择的结束位置。如果提供了第二个参数，但第三个参数未提供，在文本框中被选的文本将从起始位置到结束位置。

我们写一个非常容易理解的格式：如果仅有一个参数提供，那么我们就使用文本框的原型方法 select() 在这个文本框中以选择所有的文本：

function textboxSelect(oTextbox, iStart, iEnd) {

switch(arguments.length) {

case 1:

oTextbox.select();

break;

...

}

}

在这里我们使用了 switch 语句测试有多少个参数输入。如果仅有一个，即只有 oTextbox 被

输入。下一步， 我们跳到有三个参数都被选择的 case 语句的开始处（ iStart 和 iEnd 都被选择）。

这里，我们需要用一个浏览器检测一下这个方法所做的一切，对于 IE 浏览器，我们将使用一个文本范围对象。

function textboxSelect (oTextbox, iStart, iEnd) {

switch(arguments.length) {

case 1:

oTextbox.select();

break;

case 3:

if (isIE) {

var oRange = oTextbox.createTextRange();

oRange.moveStart("character", iStart);

oRange.moveEnd("character", -oTextbox.value.length + iEnd);

oRange.select();

} else if (isMoz) {

...

}

}

}

在粗体代码中，我们从一个 text range 对象（由文本框对象创建的文本范围对象 TextRange ）开始， TextRange 设置了文本选择范围的起始和结束坐标，要调整这开始坐标我们用 moveStart() 方法；这个方法给出了两个参数：参数一是移动间隔类型，代码中使用了 ”character” （字符）类型 ；参数二是移动多少个间隔，比如移动了 5 个间隔那么就由参数一 ”character” 得知移动了 5 个字符， 如果参数一是 ”word” （词），那么就移动了 5 个词。（ 译者注： 关于 TextRange 对象的方法详细说明详见 MSDN ）。 moveEnd() 有同样的参数，稍有不同的是其第二个参数必须是负数（ 译者注 ：在 MSDN2001 中查得这个参数可以是正数，可能原作者考虑到 IE 版本较低的问题），你可以想象为移动到被选择文本结束处，然后后退一个间隔，后退两个间隔 … 。为了获得 moveEnd() 的第二个参数，我们将赋给 iEnd 文本框中文本长度的负值， 因此，如果 iEnd 是 8 且文本框中有 10 个字符，第二个参数变为 -2 ，选择范围会将结束点会后退 2 个字符。最终，我们调用 select() 方法在文本框中加亮选择的范围。

为 Mozilla 浏览器完成上面这些事情居然更容易办到。

文本框对象有一个 setSelectionRange() 方法，它有两个参数：选择的开始和结束位置，可以直接通过 iStart 和 iEnd 设定：

function textboxSelect (oTextbox, iStart, iEnd) {

switch(arguments.length) {
case 1:
oTextbox.select();
break;

case 3:

if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz) {
oTextbox.setSelectionRange(iStart, iEnd);
}
}
}

现在我们返回到上一个 case 语句处，即只赋给了两个参数（ iEnd 未赋值）的 case 语句处。

实际上，与赋三个参数不同的是 iEnd 必须等于在文本框中字符串的长度就可以了。像下面这样实现：

function textboxSelect (oTextbox, iStart, iEnd) {

switch(arguments.length) {
case 1:
oTextbox.select();
break;

case 2:
iEnd = oTextbox.value.length;
/* falls through 由 case3 继续处理 */

case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz){
oTextbox.setSelectionRange(iStart, iEnd);
}
}
}

在上面的 case 2 中我们没有使用 break 语句，只是在执行完 case 2 后的语句后再进入下一个 case 语句。

(一) (二) （三）