日期:2014-05-16  浏览次数:20477 次

js获取光标位置的方法

1、====使用TextRange获取输入框中光标的位置====

????? TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了。不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢??
????? TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化、删除、新增等。但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置。其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标位置,然后使用正则表达式判断输入内容。?

????? 获取输入框中的光标位置的整个代码其实很短,只是这些对象和方法不太常用而已。???????

<script type="text/javascript">
    function GetCursorPsn(txb){
        var slct = document.selection;
        var mg = slct.createRange();
        txb.select();
        mg.setEndPoint("StartToStart",slct.createRange());
        var psn = rng.text.length;
        mg.collapse(false);
        mg.select();
        return psn;
    }
</script>

?????? 这里说一下使用这个GetCursorPsn()方法后,会给输入框操作带来的副作用。对于输入框<input type="text" onkeydown="GetCursorPsn(this)">,它将不能再使用Shift+左右这两个方向键来选择文本;对于<textarea onkeydown="GetCursorPsn(this)"></textarea>,将不能再使用Shift+上下左右四个方向键来选择文本。因为代码在获取了当前光标到文本的startPoint后,调用rng.collapse(false);会改变文本筐内文本的EditPoint。不过这个副作用基本不会给我们使用文本框带来什么大的问题,所以基本不用太在意。

?

2、====JavaScript获取textarea中光标的位置====

<HTML>
 <HEAD>
  <TITLE> TEST </TITLE>
  <style>
    body,td{
      font-family:verdana,arial,helvetica,sans-serif;
      font-size:12px;
    }
  </style>
  <script type="text/javascript">
    var start = 0;
    var end = 0;
    function add(){
	var textBox = document.getElementById("ta");
	var pre = textBox.value.substr(0,start);
	var post = textBox.value.substr(end);
	textBox.value = pre + document.getElementById("inputtext").value 
			+ post;
    }
	
    function savePos(textBox){
	//如果是Firefox(1.5)的话,方法很简单
	if(typeof(textBox.selectionStart) == "number"){
	    start = textBox.selectionStart;
	    end = textBox.selectionEnd;
	}
	//下面是IE(6.0)的方法,较为复杂,还要计算上“\n”
	else if(document.selection){
	    var range = document.selection.createRange();
	    if(range.parentElement().id == textBox.id){
		//create a selection of the whole textarea
		var range_all = document.body.createTextRange();
		range_all.moveToElementText(textBox);
		//两个range,一个是已经选择的text(range),
 		  一个是整个textarea(range_all)
		//range_all.collpareEndPoints()比较两个端点,
		  如果range_all比range更往左(further to the left),
		  则返回小于0的值,range_all往右移一点,直到两个range的start相同。
		//calculate selection start point by moving beginning of 
		  range_all to beginning of range
		for(start=0;range_all.compareEndPoints("StartToStart",
		    range)<0;start++){
		    range_all.moveStart('character',1);
		}
		//get number of line breaks from textarea start to selection
      		  start and add them to start
		//计算一下‘\n’
		for(var i=0; i<=start;i++){
		    if(textBox.value.charAt(i) == '\n')
			start++;
		}
		//create a selection of the whole textarea
		var range_all = document.body.createTextRange();
		range_all.moveToElementText(textBox);
		//calculate selection end point by moving beginning of 
		  range_all to end of range
		for(end=0;range_all.compareEndPoints('StartToStart',range)<0;
		    end++){
		    range_all.moveStart('character',1);
		}
		//get number of line breaks from textarea start to selection
		  end and add them to end
		for(var i=0;i<=end;i++){
		    if(textBox.value.charAt(i)=='\n')
			end ++;
		}
	    }
	}
	document.getElementById("start").value = start;
	document.getElementById("e