Disallow typing of few of characters e.g.'<

2019-03-03 03:11发布

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.

3条回答
等我变得足够好
2楼-- · 2019-03-03 03:41

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楼-- · 2019-03-03 03:42
$('#textBox').keyup(function(e){
            var myText = $('#textBox').val(); 
            myText =  myText.replace(">", "");
            myText =  myText.replace("<", "");
            $('#textBox').val(myText);
        });

-- Update --

keyup instead keypress

查看更多
beautiful°
4楼-- · 2019-03-03 03:51

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

查看更多
登录 后发表回答