Position of the cursor in input, textarea, and Div

Set and obtain the cursor position

• In textarea and input, the cursor function can be compatible with IE and Firefox. For editable Div, the following code can run normally only in IE.

IE branch: The SEL variable in the function is an optional area of the entire document. Therefore, a loop is required to make the last text in the SEL area match the text in the text box for the longest time, the offset is the cursor position.

Function getcaretpos (element) <br/>{< br/> var caretpos = 0; // ie support <br/> If (document. selection) {<br/> element. focus (); <br/> var sel = document. selection. createRange (); <br/> SEL. movestart ('character ',-element. innertext. length); <br/> var text = SEL. text; <br/> for (VAR I = 0; I <element. innertext. length; I ++) <br/>{< br/> If (element. innertext. substring (0, I + 1) = text. substring (text. length-I-1, text. length) <br/>{< br/> caretpos = I + 1; <br/>}< br/> // Firefox support only for textarea and input <br/> else if (element. selectionstart | element. selectionstart = '0') <br/> caretpos = element. selectionstart; <br/> alert (caretpos); <br/>}

• In textarea and input, the following setting functions are compatible with IE and Firefox. For editable Div, the following code can run normally only in IE.

Function setcaretpos (/* domnode */element,/* Number */location) {<br/> If (element. setselectionrange) <br/>{< br/> element. focus (); <br/> element. setselectionrange (location, location); <br/>}< br/> else if (document. body. createTextRange) {<br/> var range = document. body. createTextRange (); <br/> range. movetoelementtext (element); <br/> range. collapse (true); <br/> range. move ('character ', location); <br/> range. select (); <br/>}< br/>}

Obtain the coordinates of the cursor position (only IE)

VaR range = document. selection. createRange (); <br/> alert (range. offsetleft); // X coordinate <br/> alert (range. offsettop); // y coordinate

Select a piece of text

In textarea and input, the following setting functions are compatible with IE and Firefox. For editable Div, the following code can run normally only in IE.

 

Function setselect (element, begin, end) <br/>{< br/> If (document. body. createTextRange) <br/>{< br/> var range = document. body. createTextRange (); <br/> var text = element [element. tagname = 'div '? 'Innertext': 'value']; <br/> var line1 = text. substring (0, begin ). split ('/N '). length-1; <br/> var line2 = text. substring (end, text. length ). split ('/N '). length-1; <br/> range. movetoelementtext (element) <br/> range. moveend ('character ', parseint (end)-element [element. tagname = 'div '? 'Innertext': 'value']. length + line2); <br/> range. movestart ('character ', parseint (BEGIN)-line1); <br/> range. select (); <br/>}< br/> else if (element. setselectionrange) <br/>{< br/> element. setselectionrange (begin, end); <br/>}< br/>}

For IE, if you select a piece of text, you can call the Execcommand method of the textrange object to perform operations on the format of the selected text, including bold, underlined, italic, etc. The command list is

 

 

Command name	Parameters
Italic	N/
Bold	N/
Strikethrough	N/
Underline	N/
Insertorderedlist	N/
Insertunorderedlist	N/
Forecolor	Font color
Backcolor	Selected text background color

Example

Range.exe ccommand ('bold ', false, null); range.exe ccommand ('forecolor', false, this. highlightcolor); for details about textrange in IE, refer to the following link in msdn:

The http://msdn.microsoft.com/en-us/library/ms535872 (vs.85). aspx