Use JavaScript to obtain the cursor position in textarea

For those who write Javascript into the Web Editor, obtaining the cursor position in textarea is a very important issue. Many people are often at a loss and cannot find a good solution. Yesterday I found a piece of JavaScript on the Internet Code I didn't want to put the original version here, because it was so wonderful that I was afraid that it would be broken, so I should leave the original version 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 it is Firefox (1.5), the method is simple.
If (typeof (textbox. selectionstart) = "Number "){
Start = textbox. selectionstart;
End = textbox. selectionend;
}
// The following is the IE (6.0) method, which is very troublesome and must be calculated as '\ 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 ranges, one selected text (range) and the other selected textarea (range_all)
// Range_all.compareendpoints () compares two endpoints. If range_all is greater to left than range (further to the left), then // If the returned value is less than 0, range_all is shifted to the right, until the start values of the two ranges are the same.
// 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
// 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 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;
}
The following describes how to call JS Code on the 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 = "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>
The original code is: Success!

This section of JS Code supports both IE and Firefox, which is wonderful. It can be seen that this person has profound JS skills.

BTW: I heard that Firefox's current market share has already reached 17%, and IE8 is coming soon. There will be another battle between browsers, this battle will make the browser's parsing standards more and more standardized, and we will write code more and more easily. This is really a pleasure.