Click here to Skip to main content
11,715,491 members (85,702 online)
Click here to Skip to main content

Attach Event to all the TextBoxes in a WebPage

, 24 Apr 2014 CPOL 4.8K 4
Rate this:
Please Sign up or sign in to vote.
Inspired from a Question, I am blogging about a simple technique to attach KeyPress Event to all the TextBoxes of a WebPage.

All TextBoxes except Email type allow only numbers

All TextBoxes except Email type allow only numbers


Update on 25 April 2014

Blog continues...

Inspired from a Question, I am blogging about a simple technique to attach KeyPress Event to all the TextBoxes of a WebPage.

And what is the Technique?

  • Loop through all the Controls in the WebPage
  • Find which are TextBoxes
  • For those Boxes, attach KeyPress Event

We will do it using JavaScript.

Can you elaborate each step?

Why not !!! Let’s explore.

Loop through all the Controls in the WebPage

var allInputs = new Array();

// store collection of all <input/> elements
allInputs = document.getElementsByTagName('input');

So, allInputs array would contain all the input elements on the WebPage.

Find which are TextBoxes

for (i = 0; i < allInputs.length; i++) {
    // loop through and find <input type="text"/>
    if (allInputs[i].type == 'text') {
        // This is a TextBox. Here we can attach any Event.
    }
}

Here we are looping through all the inputs and checking if its type is text. If satisfied, it is a TextBox.
In that if clause, we can attach any Event we need. We will attach the KeyPress Event in the next Step.

For those Boxes, attach KeyPress Event

We will attach KeyPress Event as an example. For that, we will use jQuery KeyPress.

for (i = 0; i < allInputs.length; i++) {
    // loop through and find <input type="text"/>
    if (allInputs[i].type == 'text') {
        // This is a TextBox. Here we can attach any Event.
        // Let's attach KeyPress Event to the TextBox.
        $(allInputs[i]).keypress(function (event) {
            if (!isNumber(event)) {
                event.preventDefault();
            }
        });
    }
}

Here, we attached the KeyPress Event and inside that Event, we are calling one function isNumber(event). If the pressed key is not a number, it would ignore as event.preventDefault() comes into action, else it will allow.

Note:

The function isNumber(event) just checks, if the pressed key is a numeric key or not. Refer the Demo link given below to see the code for this function.

See this in action

Demo – Here.

Update, Improvements and Quicker jQuery Approach

Thanks to Kshirodra Meher and Subhajit Datta for the valuable suggestions.

What they suggested?

In our first step, we looped through all the TextBoxes present in the Page, which can be optimized with a simpler jQuery block coded below.
$("input[type=text]").bind("keypress", function (e) {
    if (!isNumber(e)) {
        return false;
    }
});
So, the main game changer here is the Selector $("input[type=text]"). It selects all the inputs of type text. To know more click - Attribute Equals Selector [name="value"]. We have also restricted the paste event on the TextBoxes because it was allowing all characters into the box.
$("input[type=text]").bind("paste", function (e) {
    return false;
});

New Demo

HERE.

Share your thoughts !!!

If you like the Blog, share among your friends. Feel free to comment, if you have any doubts or queries.


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
NOW I am a Conference Speaker. Please invite me to your College, Company, Event or Conference !!!

Proud Indian | Microsoft MVP | CodeProject MVP | Author | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cricketer | Cook | Dancer

Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

taditdash.wordpress.com

Programming Community Profiles

jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015
  3. Code Project MVP 2014, 2015
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150901.1 | Last Updated 25 Apr 2014
Article Copyright 2014 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid