JavaScript gets the cursor position code of the TEXTAREA element

Source: Internet
Author: User
Keywords Web page production Ajax javascript
Tags ajax button code consortium content data document function

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) &lt; 0 &amp;&amp; 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;

Related Article

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.