常用光标和选择操作

By satan ( 九月 5, 2010 at 4:50 下午) · Filed under js, ,

先来个例子， 找点感觉

ie 下要操作光标， 首先要有一个选择区对象， 也就是textRange
var object=document.selection.createRange();

这个对象包含了很多函数和对象， 下面列举了常用的一些
object.collapse( [bStart])
把选择取的开始的结束重合在一起
iMoved = object.moveEnd(sUnit [, iCount])
把选择区的结束移动 iCount 个 sUnit， 正数向前，负数向后
object.moveStart(sUnit [, iCount])
把选择区的开始移动 iCount 个 sUnit， 正数向前，负数向后
sUnit 可以是
character 字符，word 词，sentence 句, textedit 编辑的内容， moveStart 中用的话是移动到开始，moveEnd 中用的话是移动到结束。
object.select()
高亮选择区对象

如果只是要操纵光标的话，把选择区的开始和结束设成一个值或者说是重合在一起就可以了。

firefox, chrome 下就比较简单了，使用：
obj.setSelectionRange( start, end )
start 是选择区的开始， end的是选择区的结束

<textarea id="text" style="width: 400px; height: 150px;">
	轻轻的我走了，正如我轻轻的来；  我轻轻的招手，作别西天的云彩。 那河畔的金柳，是夕阳中的新娘； 波光里的艳影，在我的心头荡漾。 软泥上的青荇，油油的在水底招摇； 在康河的柔波里，我甘心做一条水草！ 那榆荫下的一潭，不是清泉， 是天上虹揉碎在浮藻间，沉淀着彩虹似的梦。 寻梦？撑一支长篙，向青草更青处漫溯， 满载一船星辉，在星辉斑斓里放歌。 但我不能放歌，悄悄是别离的笙箫； 夏虫也为我沉默，沉默是今晚的康桥。
</textarea>
	<div>
	<button>当前位置</button>
	<button>当前位置+2</button>
	<button>插入"你好么"</button>
	<button>到开始</button>
	<button>到最后</button>
	<button>选择两个字</button>
	</div>
<script type="text/javascript">
function getCursorPosition (obj) {//获取光标位置函数
	var cursorpos = 0;	// IE Support
	if (document.selection) {
		obj.focus ();
		var Sel = document.selection.createRange ();
		Sel.collapse(true);
		Sel.moveStart('character', -obj.value.length);
		cursorpos = Sel.text.length;
	}
	else if (obj.selectionStart || obj.selectionStart == '0')
		cursorpos = obj.selectionStart;
	return (cursorpos);
}
//PS：参数obj为input或者textarea对象
function setCursorPosition(obj, pos){//设置光标位置函数
	if(obj.setSelectionRange)
	{
		obj.focus();
		obj.setSelectionRange(pos,pos);
	}
	else if (obj.createTextRange) {
		var range = obj.createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
	}
}
function selectText(obj, len){//设置光标位置函数
	var pos = getCursorPosition(obj);
	if(obj.setSelectionRange)
	{
		obj.focus();
		obj.setSelectionRange(pos,pos+len);
	}
	else if (obj.createTextRange) {
		var range = obj.createTextRange();
		range.moveStart('character', -pos);
		range.collapse(true);
		range.moveEnd('character', pos+len);
		range.moveStart('character', pos);
		range.select();
	}
}
function insertText(obj,str) {
	obj.focus();
	if (document.selection) {
		var range = document.selection.createRange();
		range.text = str;
	} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
		var startPos = obj.selectionStart,
			endPos = obj.selectionEnd,
			cursorPos = startPos,
			tmpStr = obj.value;
		obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
		cursorPos += str.length;
		obj.selectionStart = obj.selectionEnd = cursorPos;
	} else {
		obj.value += str;
	}
}
function moveBegin(obj) {
	obj.focus();
	var len = obj.value.length;
	if (document.selection) {
		var range = obj.createTextRange();
		range.moveStart('character',0);
		range.collapse(true);
		range.select();
	} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
		obj.selectionStart = obj.selectionEnd = 0;
	}
}
function moveEnd(obj){
	obj.focus();
	var len = obj.value.length;
	if (document.selection) {
		var range = obj.createTextRange();
		//range.moveStart('character',len);
		// collapse 的参数是指collapse 到开始么, 把整个值改为true, 光标就到最前面去了
		range.collapse();
		range.select();
	} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
		obj.selectionStart = obj.selectionEnd = len;
	}
}
var t = document.getElementById('text');
var btns = document.getElementsByTagName('button');
btns[0].onclick = function() {
	alert(getCursorPosition(t));
}
btns[1].onclick = function() {
	var pos = getCursorPosition(t);
	setCursorPosition(t, pos+2)
}
btns[2].onclick = function() {
	insertText(t, "你好么");
}
btns[3].onclick = function() {
	moveBegin(t);
}
btns[4].onclick = function() {
	moveEnd(t);
}
btns[5].onclick = function() {
	selectText(t,2);
}
</script>

Comments (1)