Home > Developer > JavaScript
<!doctype html>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
Cursor position of the <title>demo:textarea element </title>
<style>
#result {
font-size:18px;
line-height:25px;
padding-left:20px;
}
</style>
<body>
Cursor position of the <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= "M" ></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>
<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) {//The 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 must get cursor position.")
}
Textarea.focus ();
if (textarea.setselectionrange) {//The 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: &L T;/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>
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
