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) {
i开发者_JAVA技巧f (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 byif (this.value != this.value.replace(/[<>]/g, ''))
check. Also updated solution.
Thanks again to all the answerers.
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 :-)
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()
$('#textBox').keyup(function(e){
var myText = $('#textBox').val();
myText = myText.replace(">", "");
myText = myText.replace("<", "");
$('#textBox').val(myText);
});
-- Update --
keyup
instead keypress
精彩评论