Range:文本框选区学习笔记 ---- Hiro，工作，生活

分享到

新浪微博

豆瓣

QQ空间

Twitter

Range:文本框选区学习笔记

分类:Pure Javascript 发表时间:2010年11月22日字体大小:12号 14号

有一段时间没有看《Javascript高级程序设计》了，最近重新接着看起，发现新的两个勘误，已经提交给为之漫笔了。

昨晚看到了文本框选区跨浏览器处理的部分。之前参加的交流会上，Taobao的前端分享过他们的Editor，主要的技术也是Range的应用。Range主要还是用在即见即所得Editor中，本文纯粹是做笔记之用，为避免以后自己遇到这样的需求而到处搜索，不如在自己的Blog上做个标记。

也做了个Demo页面，有兴趣的可以点击了查看效果。

download demo

一、Html代码：

<ul>
	<li><input type="text" value="Hello World!" id="textbox" name="textbox" size="50" /></li>
 
    <li><input type="button" id="getSelectedBtn" value="getSelectedText" /></li>
 
    <li><label for="startIndex">开始位置：</label><input type="text" size="5" id="startIndex" name="startIndex" />&nbsp;&nbsp;&nbsp;&nbsp;<label for="stopIndex">结束位置：</label><input type="text" size="5" id="stopIndex" name="endIndex" /></li>
 
	<li><input type="button" id="selectBtn" value="selectText" /></li>
</ul>

二、Javascript代码：

var textbox = document.getElementById('textbox'),
	getSelectedBtn = document.getElementById('getSelectedBtn'),
	selectBtn = document.getElementById('selectBtn');
 
function getSelectedText(textbox) {
	if(document.selection) {
		return document.selection.createRange().text;
	} else { //IE
		return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
	};
}
 
function selectText(textbox) {
	var startIndex = document.getElementById('startIndex').value, 
		stopIndex = document.getElementById('stopIndex').value;
	if(textbox.setSelectionRange) {
		textbox.setSelectionRange(startIndex, stopIndex);
	} else if(textbox.createTextRange) { //IE
		var range = textbox.createTextRange();		//创建范围
		range.collapse(true);				//折叠预选取范围到开始位置
		range.moveStart('character', startIndex);		//将预选取范围的起点和终点移动到相同的位置
		range.moveEnd('character', stopIndex - startIndex);		//选取字符长度
		range.select();			//选取范围
	alert(stopIndex);
	}
	textbox.focus();
}
 
getSelectedBtn.onclick = function() {
	alert(getSelectedText(textbox));
};
selectBtn.onclick = function() {
	selectText(textbox);
};