JS TextArea Get the instructions and examples of the cursor

Perhaps many friends would be confused about how the function of pop-up user list in Sina Weibo and in the broken up of the company will be realized.

、

One of the hardest things to solve is to get the relative position of the current cursor text box. Because an ordinary <textarea></textarea> through the normal way is unable to obtain.

What about it ~

The first step: Create a normal textarea box, and then in the textarea outer set of a div (div position set to relative, will be based on this div to position the pop-up box).

Step two: Create a div with the same size as textarea (this div doesn't matter where it is) I'll call it Div_textarea.

Note: The font used by the Div, the size of the text, the line spacing, and so on, are identical to those used in the text box. Then the div_textarea position also set to relative,visibility for hidden (this is the back of the operation, of course, can not let people see)

Description: The function of this div is to get the relative position of the input @ time mark.

The structure is as follows:

Step three: script gets relative position

Action: When the user enters @, the script automatically copies the characters in the text box to Div_textarea , and then gets the current text box cursor behind the first word, and then inserts <span class= at the same position as the text box at @. Nowpos "></span> (the relative position of the span and @ should be the same).

Once the insertion is complete, you will know where the @ is from the text box as long as you get the relative position of the span from the Div_textarea.

Get a relative position.

See a JS implementation code

So it's still the original.

varstart=0;

Varend=0;

Functionadd () {

Vartextbox=document.getelementbyid ("Ta");

Varpre=textbox.value.substr (0,start);

VARPOST=TEXTBOX.VALUE.SUBSTR (end);

Textbox.value=pre+document.

getElementById ("Inputtext"). Value+post;

}

Functionsavepos (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 '

ElseIf (document.selection) {

Varrange=document.selection.createrange ();

if (Range.parentelement (). id==textbox.id) {

Createaselectionofthewholetextarea

Varrange_all=document.body.createtextrange ();

Range_all.movetoelementtext (TextBox);

Two range, one is the selected text (range),

One is the whole textarea (Range_all)

Range_all.compareendpoints () compares two endpoints,

If the range_all is farther to the left (Furthertotheleft) than range,

then//Returns a value less than 0, the range_all moves to the right point until the start of the two range is the same.

Calculateselectionstartpointbymoving

Beginningofrange_alltobeginningofrange

for (start=0;range_all.compareendpoints

("Starttostart", Range) <0;start++) Range_all.movestart (' character ', 1);

Getnumberoflinebreaksfromtextareastarttose

Lectionstartandaddthemtostart

Calculate n

for (vari=0;i<=start;i++) {

if (textBox.value.charAt (i) = = ' n ')

start++;

}

Createaselectionofthewholetextarea

Varrange_all=document.body.createtextrange ();

Range_all.movetoelementtext (TextBox);

Calculateselectionendpointbymovingbeginningofrange_alltoendofrange

For (end=0;range_all.compareendpoints (' starttoend ', Range) <0;end++)

Range_all.movestart (' character ', 1);

Getnumberoflinebreaksfromtextareastarttoselectionendandaddthemtoend

for (vari=0;i<=end;i++) {

if (textBox.value.charAt (i) = = ' n ')

end++;

}

}

}

document.getElementById ("Start"). Value=start;

document.getElementById ("End"). Value=end;

}

The following is a way to call the JS code in a page:

<formactionformaction= "a.cgi" >

<tablebordertableborder= "1"

cellspacing= "0" cellpadding= "0" >

<tr>

<td>start:<inputtypeinputtype= "Text"

Id= "Start" size= "3"/></td>

<td>end:<inputtypeinputtype= "Text"

Id= "End" size= "3"/></td>

</tr>

<tr>

<tdcolspantdcolspan= "2" >

<textareaidtextareaid= "Ta" onkeydown= "Savepos (This)"

Onkeyup= "Savepos (This)"

Onmousedown= "Savepos (This)"

Onmouseup= "Savepos (This)"

Onfocus= "Savepos (This)"

Rows= "cols=" ></textarea>

</td>

</tr>

<tr>

<td><inputtypeinputtype= "Text"

Id= "Inputtext"/></td>

<td><inputtypeinputtype= "button"

onclick= "Add ()" value= "AddText"/></td>

</tr>

</table>

</form>