Examples of createTextRange ()

Examples of createTextRange ()

This article describes how to use createTextRange (). For more information, see

The Code is as follows:

<Script language = "javascript">

Function test ()

{

Var rng = document. body. createTextRange ();

Alert (rng. text)

}

Function test1 ()

{

Var rng = document. body. createTextRange ();

Alert(rng.html Text)

}

</Script>

<Input type = "button" onclick = "test ()" value = "text">

<Input type = "button" onclick = "test1 ()" value = "htmlText">

 

Obtain the selected text in the specified text box: only the first text box is returned.

The Code is as follows:

<Input id = "inp1" type = "text" value = "1234567890">

<Input id = "inp2" type = "text" value = "9876543210">

<Input type = "button" onclick = "test ()" value = "OK">

<Script language = "javascript">

Function test ()

{

Var o = document. getElementById ("inp1 ")

Var r = document. selection. createRange ();

If (o. createTextRange (). inRange (r ))

Alert (r. text );

}

</Script>

 

Reverse search of page text

The Code is as follows:

Ababababababa

<Input value = "reverse query a" onclick = myfindtext ("a") type = "button">

<Script language = 'javascript '>

Var rng = document. body. createTextRange ();

Function myfindtext (text)

{

Rng. collapse (false );

If (rng. findText (text,-1, 1 ))

{

Rng. select ();

Rng. collapse (true );

} Else

{Alert ("end ");}

}

</Script>

 

Focus the control and place the cursor at the end.

The Code is as follows:

<Script language = "javascript">

Function setFocus ()

{

Var obj = event. srcElement;

Var txt = obj. createTextRange ();

Txt. moveStart ('character ', obj. value. length );

Txt. collapse (true );

Txt. select ();

}

</Script>

<Input type = "text" value = "http://toto369.net" onfocus = "setFocus ()">

 

Obtain the cursor position in the text box.

The Code is as follows:

<Script language = "javascript">

Function getPos (obj ){

Obj. focus ();

Var s = document. selection. createRange ();

S. setEndPoint ("StartToStart", obj. createTextRange ())

Alert (s. text. length );

}

</Script>

<Input type = "text" id = "txt1" value = "1234567890">

<Input type = "button" value = "Get cursor position" onclick = getPos (txt1)>

 

Control the cursor position in the input box

The Code is as follows:

<Script language = "javascript">

Function setPos (num)

{

Text1.focus ();

Var e = document. getElementById ("text5 ");

Var r = e. createTextRange ();

R. moveStart ('character ', num );

R. collapse (true );

R. select ();

}

</Script>

<Input type = "text" id = "text5" value = "1234567890">

<Select onchange = "setPos (this. selectedIndex)">

<Option value = "0"> 0 </option>

<Option value = "1"> 1 </option>

<Option value = "2"> 2 </option>

<Option value = "3"> 3 </option>

<Option value = "4"> 4 </option>

<Option value = "5"> 5 </option>

<Option value = "6"> 6 </option>

<Option value = "7"> 7 </option>

</Select>

 

Select a text section in the text box

The Code is as follows:

<Script language = javascript>

Function sel (obj, num)

{

Var rng = obj. createTextRange ()

Var sel = rng. duplicate ();

Sel. moveStart ("character", num );

Sel. setEndPoint ("EndToStart", rng );

Sel. select ();

}

</Script>

<Input type = "text" id = "text1." value = "1234567890">

<Select onchange = "sel (text1, this. value)">

<Option value = "0"> 0 </option>

<Option value = "1"> 1 </option>

<Option value = "2"> 2 </option>

<Option value = "3"> 3 </option>

<Option value = "4"> 4 </option>

<Option value = "5"> 5 </option>

<Option value = "6"> 6 </option>

<Option value = "7"> 7 </option>

</Select>

 

Control the movement of the cursor in the text box

The Code is as follows:

<Input type = "button" value = "<" onclick = go (-1)>

<Input id = "demo" value = "here is the text">

<Input type = "button" value = ">" onclick = go (1)>

<Script language = "javascript">

Function go (n ){

Demo. focus ();

With (document. selection. createRange ())

{

MoveStart ("character", n );

Collapse ();

Select ();

}

}

</Script>