JS gets a set of controls and adds properties or events

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.