Disallow typing of few of characters e.g.” in all input textboxes using jquery

How do I achieve this:-

When user types character like 'abcd' and then '>'(an invalid character for my application), I want to set the text back to 'abcd'. Better if we can cancel the input itself as we do in winforms application. This should happen when user is typing and not on a click of button.

I want this to be applied on all text boxes in my web page. This will be easy if the solution is jQuery based. May be something which will start like this.

$("input[type='text']")

SOLUTION
I used both of the answer provided by @jAndy and @Iacopo (Sorry, couldn’t mark as answer to both) as below.

$(document).ready(function() {
  //makes sure that user cannot enter < or > sign in text boxes.
  $("input:text").keyup(purgeInvalidChars)
      .blur(purgeInvalidChars)
      .bind('keypress', function(event) {
        if (event.which === 62 || event.which === 60)
          return (false);
      });
  function purgeInvalidChars() {
    if (this.value != this.value.replace(/[<>]/g, '')) {
      this.value = this.value.replace(/[<>]/g, '');
    }
  }
});

Though one issue still remained i.e. It doesn’t allow user to select text in the textbox and this only happens on chrome, work fine on IE (for the first time :D), not tested on firefox. It would be glad if anyone can find solution for that or hope people at Google solves it :D.

UPDATE
I solved it by if (this.value != this.value.replace(/[<>]/g, '')) check. Also updated solution.

Thanks again to all the answerers.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You should catch the ‘keyup’ and ‘blur’ events and attach them to a function that bonifies the input: don’t forget that the user can paste an invalid sequence of characters.

So for example

$('input[type="text"]').keyup(purgeInvalidChars).blur(purgeInvalidChars)

function purgeInvalidChars()
{
   this.value = this.value.replace(/[<>]/g, ''); 
}

surely you will improve the regexp, maybe replacing all characters except the enabled ones.

Sorry, I can’t test my code, so you should take it cum grano salis 🙂

Method 2

Example (keypress):

$(document).ready(function(){
    $('input:text').bind('keypress', function(event){

    if(event.which === 62 || event.which === 60)
       return(false);
    });
});​

Example (keydown):

$(document).ready(function(){
  $('input:text').bind('keydown', function(event){
    if(event.which === 226)
       return(false);
  });
});​

Just make use of the preventDefault and stopPropagation functions for events. Those are triggered by returning (false) within an event handler.

In this example, I just check for the keycode of < and > which is thankfully on the same key. If we hit that code, we just prevent the default behavior.

Reference: .preventDefault(), .stopPropagation()

Method 3

$('#textBox').keyup(function(e){
            var myText = $('#textBox').val(); 
            myText =  myText.replace(">", "");
            myText =  myText.replace("<", "");
            $('#textBox').val(myText);
        });

— Update —

keyup instead keypress

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0