Web effects get the cursor position code of the TEXTAREA element
<!doctype html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "HTML; charset=gb2312 "/>
Cursor position of the <title>demo:textarea element </title>
<style>
#result {
font-size:18px;
line-height:25px;
padding-left:20px;
}
</style>
</head>
<body>
Cursor position of the <h1>textarea element </h1>
<ul>
<li> get the current cursor position of the TEXTAREA element </li>
<li> set the cursor position back to the original TEXTAREA element </li>
<li> inserts text at the cursor position of the TEXTAREA element </li>
</ul>
<form action= "#" >
<textarea id= "Test" rows= "8" cols= "></textarea>"
<p>
<input type= "button" id= "Get" value= "get cursor position"/>
<input type= "button" id= "Set" value= "set cursor position"/>
<input type= "button" id= "Add" value= "add text after cursor position"/>
</p>
</form>
<h2>textarea range:</h2>
<div id= "Result" ></div>
<script type= "Text/javascript" >
/**
* Cursorposition Object
*
* Created by blank Zheng on 2010/11/12.
* Copyright (c) planabc.net. All rights reserved.
*
* The copyrights embodied in the content of this file are licensed under the BSD (revised) Open source license.
*/
var cursorposition = {
get:function (textarea) {
var rangedata = {text: "", start:0, end:0};
if (textarea.setselectionrange) {//Consortium
Textarea.focus ();
rangedata.start= Textarea.selectionstart;
rangedata.end = textarea.selectionend;
Rangedata.text = (Rangedata.start!= rangedata.end)? Textarea.value.substring (Rangedata.start, Rangedata.end): "";
} else if (document.selection) {//IE
Textarea.focus ();
var i,
OS = Document.selection.createrange (),
Don ' t:or = Textarea.createtextrange ()
or = Document.body.createtextrange ();
Or.movetoelementtext (TEXTAREA);
rangedata.text = Os.text;
Rangedata.bookmark = Os.getbookmark ();
//Object.movestart (Sunit [, icount])
//Return Value:integer that returns the number of units moved.
for (i = 0; or.compareendpoints (' Starttostart ', OS) < 0 && Os.movestart ("character",-1)!== 0; i + +) {
//Why? You can alert (textarea.value.length)
if (Textarea.value.charat (i) = = ' n ') {
i + +;
}
}
Rangedata.start = i;
rangedata.end = rangedata.text.length + Rangedata.start;
if (!rangedata.text) {
}
}
return rangedata;
},
set:function (textarea, rangedata) {
var or;
if (!rangedata) {
alert ("You moment-in get cursor position")
}
Textarea.focus ();
if (textarea.setselectionrange) {//Consortium
Textarea.setselectionrange (Rangedata.start, rangedata.end);
} else if (Textarea.createtextrange) {//IE
or = Textarea.createtextrange ();
/*//fixbug:ues MoveToBookmark ()
//In IE, if cursor position on the end of textarea, the setcursorposition function don ' t work
if (textarea.value.length = = Rangedata.start) {
Or.collaps Tutorial E (false)
Or.select ();
} else {
Or.movetobookmark (Rangedata.bookmark);
Or.select ();
}*/
Or.movestart (' character ', Rangedata.start);
or.moveend (' character ', rangedata.end-textarea.value.length);
Or.select ();
}
},
add:function (textarea, rangedata, text) {
var ovalue, Nvalue, or, Sr, Nstart, Nend, St;
This.set (textarea, rangedata);
if (textarea.setselectionrange) {//The consortium
ovalue = Textarea.value
Nvalue = ovalue.substring (0, Rangedata.start) + text + ovalue.substring (rangedata.end);
nstart = nend = Rangedata.start + text.length;
st = textarea.scrolltop;
textarea.value = nvalue;
//fixbug:
//After textarea.values = Nvalue, scrolltop value to 0
if ( Textarea.scrolltop!= St) {
textarea.scrolltop = st;
}
Textarea.setselectionrange (Nstart, nend);
} else if (Textarea.createtextrange) {//IE
sr = Document.selection.createrange ();
Sr.text = text;
sr.setendpoint (' Starttoend ', SR);
SR.select ();
}
}
}
var Tx=document.getelementbyid ("Test"),
Re=document.getelementbyid ("result"),
Pos;
document.getElementById ("get"). onclick = function () {
alert (tx.value.length);
pos = Cursorposition.get (TX);
Re.innerhtml= ("<strong>range:</strong>" ("+ Pos.start +", "+ Pos.end +") <br/><strong>text: </strong> "+ (!pos.text?) -': Pos.text);
}
document.getElementById ("set"). onclick = function () {
Cursorposition.set (TX, POS);
}
document.getElementById ("Add"). onclick = function () {
Cursorposition.add (TX, pos, input = prompt ("You want to insert the alternate text:", ""));
}
</script>
</body>
</html>
First, we use the Rangedata object as the data store and get the focus:
var rangedata = {start:0, end:0, Text: ""};textarea.focus (); It is very easy to get the start and end position of a selection for non IE browsers:
rangedata.start= el.selectionstart;rangedata.end = El.selectionend; by intercepting the selection of the cursor we can get:
Rangedata.text = (Rangedata.start!= rangedata.end)? El.value.substring (Rangedata.start, Rangedata.end): "" and for IE browser processing is more cumbersome, but we can still get to the selection:
OS = Document.selection.createrange (), and you can also get a selection of the TEXTAREA element:
To compare or to the OS on the same level, do not use: or = Textarea.createtextrange () or = Document.body.createtextrange (); Or.movetoelementtext ( TEXTAREA); If the cursor is within the TEXTAREA element, naturally os.text is the selection that we need:
Rangedata.text = Os.text, and we can get the location data of the selection through the Os.getbookmark () method, where the data can be set back by the MoveToBookmark () method.
Getbookmark:retrieves a bookmark (opaque string) that can is used with MoveToBookmark to the Mahouve range.
Movetobookmark:moves to a bookmark.
We use Rangedata.bookmark to record the location data:
Rangedata.bookmark = Os.getbookmark (); The following are the most important steps: We compare the start position of the or with the OS's selection (using the Object.compareendpoints (Stype, Orange) method comparison) if The starting position of or is before the OS, we move the starting position of the OS 1 characters (using the Object.movestart (Sunit [, Icount]) method, which is the starting position of the selection when the OS start position is stopped before or, and the position is moved.
Compareendpoints:compares An-end point of the a TextRange object with the another range.
Movestart:changes the start position of the range.
for (i = 0; or.compareendpoints (' Starttostart ', OS) < 0 && Os.movestart ("character",-1)!== 0; i + +) {} Rangedata.start = i; but because in IE, all newline characters in the TEXTAREA element are 1 characters, can be viewed through alert (textarea.value.length), so the above code to do partial processing:
for (i = 0; or.compareendpoints (' Starttostart ', OS) < 0 && Os.movestart ("character",-1)!== 0; i + +) {//Why? You CA N Alert (textarea.value.length) if (Textarea.value.charat (i) = = ' n ') {i + +; }}rangedata.start = i; Since we got the starting position of the selection and the character of the selection string, it's natural that we can calculate the end position of the selection:
Rangedata.end = Rangedata.text.length + Rangedata.start;
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
