Use JavaScript to get cursor position in textarea _javascript tips

Source: Internet
Author: User
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>
&LT;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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.