For people writing JavaScript to write Web editor, getting the cursor position in textarea is a very important issue, and often many people are overwhelmed in this place and can't find a good way. Yesterday I found a section of JavaScript code on the Internet, originally do not want to put the original here, is because it is too wonderful, afraid I have to change the bad, so or the original put it here.
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) {
If Firefox (1.5), the method is very simple
if (typeof (Textbox.selectionstart) = = "Number") {
start = Textbox.selectionstart;
end = Textbox.selectionend;
}
The following is the method of IE (6.0), very troublesome, but also to calculate the ' \ 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);
Two range, one is the selected text (range), one is the entire textarea (Range_all)
Range_all.compareendpoints () Compares two endpoints, if the Range_all is more than range (further to the left), then//returns a value less than 0, and Range_all moves to the right a little. Until the start of the two range is the same.
Calculate selection start point by moving beginning of range_all to beginning of
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
Calculate \ 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-by-moving beginning of range_all to end of
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;
}
The following is a way to call the JS code in a page:
<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= "cols=" ></textarea>
</td>
</tr>
<tr>
<td><input type= "text" id= "Inputtext"/></td>
<td><input type= "button" onclick= "Add ()" value= "Add Text"/></td>
</tr>
</table>
</form>
The original text of this code is: http://blog.csdn.net/liujin4049/archive/2006/09/19/1244065.aspx, thank you here!
This JS code at the same time support IE and Firefox, it is wonderful, you can see this person's JS skill deep ah, hehe.
BTW: I heard that Firefox now has a market share has reached 17%, and IE8 is also coming out, the browser will set off a life-and-death battle, and this fight can make the browser's resolution standards will become more and more standard, we write code will be more and more convenient, this is a happy thing.
