javascript下获取textarea的光标位置，并插入数据

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.compareEndPoints()比较两个端点，如果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('StartToEnd', 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;

}

<form action="a.cgi">

<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)"

onfocus="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>