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