JS gets a set of controls and adds properties or events

Sometimes we need to get a collection of objects and add attributes and time to this object.CodeCan also be implemented, but always write a bunch of findcontrol

Originally, the server control we used is an HTML Tag displayed on the client, so we can use js to implement such a function. Take a group of ASP: textbox controls as an example.

Simple Interface

 

First, we add a value that cannot be blank to the five textbox controls;

 

 

 

{
This. style. display = 'none'; document. getelementbyid ('Code _ closed_text_094919 '). style. display = 'none'; document. getelementbyid ('Code _ open_image_094919 '). style. display = 'inline'; document. getelementbyid ('Code _ open_text_094919 '). style. display = 'inline ';
} "Id =" code_closed_image_094919 "style =" display: none "> {
This. style. display = 'none'; document. getelementbyid ('Code _ open_text_094919 '). style. display = 'none'; getelementbyid ('Code _ closed_image_094919 '). style. display = 'inline'; getelementbyid ('Code _ closed_text_094919 '). style. display = 'inline ';
} "Id =" code_open_image_094919 "> Code
< Script Language = " Javascript " >
Document. Body. onload =   Function Resets (){
VaR Controls = Document. getelementsbytagname ( ' Input ' );
For ( VaR I =   0 ; I < Controls. length; I ++ ){ If (Controls [I]. Type =   ' Text ' ){

controls [I]. value = " cannot be empty! " ; // Add Value };
}< BR >}

}

</SCRIPT>

 

Now add an onfocus event (clear the value of this textbox when focusing) and an onblur event (verify whether this text box is blank when leaving this Textbox, and prompt the dialog box !) The Code is as follows:

 

 

{
This. style. display = 'none'; document. getelementbyid ('Code _ closed_text_094944 '). style. display = 'none'; document. getelementbyid ('Code _ open_image_094944 '). style. display = 'inline'; document. getelementbyid ('Code _ open_text_094944 '). style. display = 'inline ';
} "Id =" code_closed_image_094944 "style =" display: none "> {
This. style. display = 'none'; document. getelementbyid ('Code _ open_text_094944 '). style. display = 'none'; getelementbyid ('Code _ closed_image_094944 '). style. display = 'inline'; getelementbyid ('Code _ closed_text_094944 '). style. display = 'inline ';
} "Id =" code_open_image_094944 "> Code
  < Script Language = " Javascript " >
Document. Body. onload =   Function Resets (){
VaR Controls = Document. getelementsbytagname ( ' Input ' );
For ( VaR I =   0 ; I < Controls. length; I ++ ){
If (Controls [I]. Type =   ' Text ' ){
Controls [I]. Value =   " Cannot be blank! " ; // Add value to the specified text
Controls [I]. onfocus =   Function (){ This . Value =   '' ;}; // Focus on clearing text values
Controls [I]. onblur =   Function (){
If ( ! This . Value. Replace ( / (^ \ S *) | (\ s * $) / G, "" )){
Alert ( This . Value +   " Cannot be blank " );
This . Focus;
}
};
// Add an onblur event to the specified text to determine whether the event is null!
}< BR >}< P>

}

/ SCRIPT>

the effect is as follows:

the effect is achieved, but the problem is that there may be other text boxes on our page. This section of JS will also have an effect on other text boxes, continue transformation

we can put these text boxes in a table or Div to limit the scope of JS's function through ID:

var controls = document. getelementbyid ('onetable '). getelementsbytagname (' Input ');

the preceding only describes how to batch add properties or events to a type of server controls. Please understand that there may be errors.