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.

回答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 :-)

回答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()

回答3:

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

-- Update --

keyup instead keypress

来源：https://stackoverflow.com/questions/3053523/disallow-typing-of-few-of-characters-e-g-in-all-input-textboxes-using-j

标签

ASP.NET