JS get TextArea Cursor position method (compatible with IE,FF)
A lot of search on the net, but found some problems in the use, all the following content is only tested in IE8
<textarea id= "T2" >123</textarea>
Method 1:
var srng = Document.selection.createRange ();
Srng.movestart (' character ',-t2.value.length);
Use this method to move the SRNG position to the beginning of the T2, I see this statement has a problem, if the cursor is not at the end of the text of the T2, it does not move much, it is not, but, there will be some problems, if the cursor is not at the end of the last or the penultimate character behind, The Srng.text value is "" Plus T2 text before the cursor, such as the cursor between 2 and 3, the resulting srng.text is "12", preceded by a space, so the result may be wrong
Method 2:
var rng = T2.createtextrange ();
var srng = Document.selection.createRange ();
Srng.setendpoint ("Starttostart", rng);
This method is good, will not be like Method 1 so many spaces, cup with IS, in IE8 setendpoint will throw parameter invalid exception, if it is input is OK, textarea not
Method 3:
var rng = Document.body.createTextRange ();
Rng.movetoelementtext (T2);var srng = Document.selection.createRange ();
Srng.setendpoint ("Starttostart", rng);
This method is OK, will not throw an exception, and will not be multiple spaces out
In fact, the idea of these 3 methods is: Document.selection.createRange () to get the range of the location at the cursor, the beginning of the range to move to the beginning of the textarea text, The content of this range is the textarea text content of the cursor together
Consolidate instances with the following code
<title>TEST</title>
<style>
body,td{
Font-family:verdana, ARIAL, Helvetica, Sans-serif;
font-size:12px;
}
</style>
<script type= "text/web Effects" >
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;
}
</script>
<body>
<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>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
