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("end").value = end;
}
</script>
</HEAD>
<BODY>
<form name="formname" method="post" action="">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>start:<input type="text" id="start" size="3" /><td>
<td>end:<input type="text" id="end" size="3" /><td>
</tr>
<tr>
<td colspan="2">
<textarea id="ta"
onkeydown="savePos(this)"
onkeyup="savePos(this)"
onmousedown="savePos(this)"
onmouseup="savePos(this)"
rows="14" cols="50">
</textarea>
</td>
</tr>
<tr>
<td><input type="text" id="inputtext" /></td>
<td>
<input type="button" onclick="add()" value="Add Text" />
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
?