选择文本

单行与多行文本框都支持select()方法，这个方法用于选择文本框中的所有文本。在调用select()方法时，大多数浏览器（Opera除外）都会将焦点设置到文本框中。这个方法不授受参数，可以在任何时候被调用。下面来看一个例子。

<form name="myForm1" class="mb20"><input type="text" name="textbox1" value="网站程序网"></form>
<script type="text/javascript">
var textbox1 = document.forms["myForm1"].elements["textbox1"];
textbox1.select();
</script>

 

在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时候。因为这样做可以让用户不必一个一个地删除文本。下面展示了实现这一操作的代码。

<form name="myForm2" class="mb20"><input type="text" name="textbox2" value="网站程序网"></form>
<script type="text/javascript">
if (document.all && !document.getElementById){
	document.getElementById = function(id){
		return document.all[id];
	}
}
 
(function(){
if(!window["ADS"]){window["ADS"] = {};}
 
function isCompatible(other) {
	if(other===false || !Array.prototype.push || !Object.hasOwnProperty || !document.createElement || !document.getElementsByTagName){
		return false;
	}
	return true;
}
window["ADS"]["isCompatible"] = isCompatible;
 
function $(){
	var elements = new Array();
	for(var i=0; i<arguments.length; i++){
		var element = arguments[i];
		if(typeof element == "string"){
			element = document.getElementById(element);
		}
		if(arguments.length == 1){
			return element;
		}
		elements.push(element);
	}
	return elements;
}
window["ADS"]["$"] = $;
 
function addEvent(node, type, listener){
	if(!isCompatible()) return false;
	if(!(node = $(node))) return false;
	if(node.addEventListener){
		node.addEventListener(type, listener, false);
		return true;
	}else if(node.attachEvent){
		node["e"+type+listener] = listener;
		node[type+listener] = function(){node["e"+type+listener](window.event);};
		node.attachEvent("on"+type,node[type+listener]);
		return true;
	}
	return false;
}
window["ADS"]["addEvent"] = addEvent;
})();

var textbox2 = document.forms["myForm2"].elements["textbox2"];

ADS.addEvent(textbox2, "focus", function(eventObject){
	eventObject = eventObject || window.event;
	var target = eventObject.target || eventObject.srcElement;

	target.select();
});
</script>

将上面的代码应用到文本框之后，只要文本框获得焦点，就会选择其中所有的文本。这种技术能够较大幅度地提升表单的易用性。

 

1.选择（select）事件

与select()方法对应的，是一个select事件。在选择了文本框中的文本时，就会触发select事件。不过，到底什么时候触发select事件，还会因浏览器而异。在IE9+、Opera、Chrome和Safari中，只有用户选择了文本（而且要释放鼠标），才会触发select事件。而在IE8及更早版本中，只要用户选择了一个字母（不必释放鼠标），就会触发select事件。另外，在调用select()方法时也会触发select事件。下面是一个简单的例子。

<form name="myForm3"><input type="text" name="textbox3" size="30" value="wangzhanchengxu.com"></form>
<script type="text/javascript">
var textbox3 = document.forms["myForm3"].elements["textbox3"];

ADS.addEvent(textbox3, "select", function(eventObject){
	eventObject = eventObject || window.event;
	var target = eventObject.target || eventObject.srcElement;

	alert("Text selected：" + target.value);
});
</script>

 

2.取得选择的文本

虽然通过select事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。HTML5通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。该规范采取的办法是添加两个属性：selectionStart和selectionEnd。这两个属性中保存的是基于0的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）。因此，要取得用户在文本框中选择的文本，可以使用如下代码。

function getSelectedText(textbox){
	return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

因为substring()方法基于字符串的偏移量执行操作，所以将selectionStart和selectionEnd直接传给它就可以取得选中的文本。

IE9+、Firefox、Safari、Chrome和Opera都支持这两个属性。IE8及之前版本不支持这两个属性，而是提供了另一种方案。

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

<form name="myForm4" class="mb20"><input type="text" name="textbox4" size="30" value="wangzhanchengxu.com"></form>
<script type="text/javascript">
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;
    }
}

var textbox4 = document.forms["myForm4"].elements["textbox4"];

ADS.addEvent(textbox4, "select", function(eventObject){
    eventObject = eventObject || window.event;
    var target = eventObject.target || eventObject.srcElement;

    alert("Text selected：" + getSelectedText(target));
});
</script>

 

这里修改了前面的函数，包括了在IE中取得选择文本的代码。注意，调用document.selection时，不需要考虑textbox参数。

3.选择部分文本

HTML 5也为选择文本框中的部分文本提供了解决方案，即最早由Firefox引入的setSelectionRange()方法。现在除select()方法之外，所有文本框都有一个setSelectionRange()方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引（类似于substring()方法的两个参数）。来看一个例子。

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"

要看到选择的文本，必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。IE9、Firefox、Safari、Chrome和Opera支持这种方案。

IE8及更早版本支持使用范围选择部分文本。要选择文本框中的部分文本，必须首先使用IE在所有文本框上提供的createTextRange()方法创建一个范围，并将其放在恰当的位置上。然后，再使用moveStart()和moveEnd()这两个范围方法将范围移动到位。不过，在调用这两个方法以前，还必须使用collapse()将范围折叠到文本框的开始位置。此时，moveStart()将范围的起点和终点移动到了相同的位置，只要再给moveEnd()传入要选择的字符总数即可。最后一步，就是使用范围的select()方法选择文本，如下面的例子所示。

textbox.value = "Hello world!";

//要选择文本框中的部分文本，必须首先使用IE在所有文本框上提供的createTextRange()方法创建一个范围
var range = textbox.createTextRange();

//选择所有文本
//使用collapse()将范围折叠到文本框的开始位置。
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", textbox.value.length);
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();
}

这个selectText()函数接收三个参数：要操作的文本框、要选择文本中第一个字符的索引和要选择文本中最后一个字符之后的索引。首先，函数测试了文本框是否包含setSelectionRange()方法。如果有，则使用该方法。否则，检测文本框是否支持createTextRange()方法。如果支持，则通过创建范围来实现选择。最后一步，就是为文本框设置焦点，以便用户看到文本框中选择的文本。可以像下面这样使用selectText()方法。

<form name="myForm5" class="mb20">
<input type="text" name="textbox5" size="30" value="wangzhanchengxu.com">
<input type="text" name="textbox6" size="30" value="wangzhanchengxu.com">
<input type="text" name="textbox7" size="30" value="wangzhanchengxu.com">
</form>

<script type="text/javascript">
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();
}

var textbox5 = document.forms["myForm5"].elements["textbox5"];
var textbox6 = document.forms["myForm5"].elements["textbox6"];
var textbox7 = document.forms["myForm5"].elements["textbox7"];

//选择所有文本
selectText(textbox5, 0, textbox5.value.length);

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

//选择第4到第6个字符
selectText(textbox7, 4, 7);
</script>

 

选择部分文本的技术在实现高级文本输入框时很有用，例如提供自动完成建议的文本框就可以使用这种技术。