Basic DOM Tutorial: Use DOM to set the text box. Basic dom tutorial

Basic DOM Tutorial: Use DOM to set the text box. Basic dom tutorial

1. Control the number of characters entered by the user

For single-line text boxes and password input boxes, you can use the maxlength attribute to control the number of characters you enter.
For multi-line text, maxlength is a custom attribute, and the maximum number of characters can be entered. When an onkeypress event occurs, the LessThan () function returns the value. The function is as follows:

<Textarea name = "comments" id = "comments" cols = "40" rows = "4" maxlength = "50" onekeypress = "return LessThan (this ); "> </textarea>
Code details

Copy codeThe Code is as follows:
<Script language = "javascript">
Function LessThan (oTextArea ){
// Return the boolean value required for the number of characters in the text box
Return oTextArea. value. length <oTextArea. getAttribute ("maxlength ");
}
</Script>
<Form method = "post" name = "myForm1" action = "addInfo. aspx">
<P> <label for = "name"> enter your name: </label>
<Input type = "text" name = "name" id = "name" class = "txt" value = "name" maxlength = "10"> </p>
<P> <label for = "comments"> I want to leave a message: </label> <br>
<Textarea name = "comments" id = "comments" cols = "40" rows = "4" maxlength = "50" onkeypress = "return LessThan (this ); "> </textarea> </p>
<P> <input type = "submit" name = "btnSubmit" id = "btnSubmit" value = "Submit" class = "btn">
<Input type = "reset" name = "btnReset" id = "btnReset" value = "Reset" class = "btn"> </p>
</Form>

2. Set the mouse to automatically select text

First, automatically focus onmouseover = "this. focus" when the mouse passes"

Followed by onfocus = "this. select ()"
Code example:

Copy codeThe Code is as follows:
<Form method = "post" name = "form1" id = "form1" action = "addInfo. aspx">
<Input type = "text" name = "name" id = "name" class = "txt" value = "name" onmouseover = "this. focus () "onfocus =" this. select () ">
</Form>

You can use the following code to focus on multiple code instances:

Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function myFocus (){
This. focus ();
}
Function mySelect (){
This. select ();
}
Window. onload = function (){
Var oForm = document. forms ["myForm1"];
OForm. name. onmouseover = myFocus;
OForm. name. onfocus = mySelect;
}
</Script>
<Form method = "post" name = "myForm1" action = "addInfo. aspx">
<P>
<Label for = "name"> enter your name: </label>
<Input type = "text" name = "name" id = "name" class = "txt" value = "name">
</P>
<P>
<Label for = "passwd"> enter your password: </label>
<Input type = "password" name = "passwd" id = "passwd" class = "txt">
</P>
<P>
<Input type = "submit" name = "btnSubmit" id = "btnSubmit" value = "Submit" class = "btn">
<Input type = "reset" name = "btnReset" id = "btnReset" value = "Reset" class = "btn">
</P>
</Form>