restrict user input using javascript

Question

Can someone show me some example for restricting user input (on input tag) in Javascript?

Something that when we set the input (type="text") to only accept numeric, so it will ignore any other input except for numeric...

I think it's handy for number input (such as zip, credit card, money, value, score, date etc...), and if you can please show me how to create input with pattern, something like:

Please Input Date:
|-----------------|
|     /     /     |
|-----------------|

PS: I heard WebForms 2.0 will support this in the future... (Acid 3 compliant browser?)

input type="date"
input type="time"
input type="number"
input type="money"

But it was only news from future :D

はると · Accepted Answer · 2010-03-17 12:13:38Z

8

This might help you.

http://www.w3schools.com/jsref/event_onkeydown.asp

<html>
<body>

<script type="text/javascript">
function noNumbers(e)
{
var keynum;
var keychar;
var numcheck;

if(window.event) // IE
{
keynum = e.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
numcheck = /\d/;
return !numcheck.test(keychar);
}
</script>

<form>
<input type="text" onkeydown="return noNumbers(event)" />
</form>

</body>
</html>

edited Mar 17, 2010 at 12:13

answered Mar 18, 2009 at 9:30

はると

1,5098 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Julian Aubourg Over a year ago

Yes, that works for simple character filtering... but what about full-fledged formats like a date ("mm/dd/yy"). You cannot just return false if it's not the proper format or else you won't ever be able to enter the first digits.

はると Over a year ago

No that's true, but it gives a certain idea on how it could be made. Fx. you would only be able to type 0 and 1 in the first charecter of the date string. If the user would type a number above that, the number wouldn't be registered. But yes this specific codes does not do the whole magic.

Julian Aubourg Over a year ago

yeah, I just commented for clarity ;)

Tim Büthe · Accepted Answer · 2009-04-07 07:42:38Z

5

This question has already an accepted answer, but I think there is a better solution to this. You don't have to implement that yourself on keydown etc., there are libraries for that. They call the technique you describe "input masks". Check out this jQuery plugin it does exactly what you want.

answered Apr 7, 2009 at 7:42

Tim Büthe

63.9k17 gold badges96 silver badges130 bronze badges

2 Comments

Matthew Over a year ago

This jQuery plugin is awesome.

isaac weathers Over a year ago

I love that plug-in but the problem remains with multiple Android devices on both native and chrome browsers where there are too many issues. For the most part, when it comes to Androids I typically end up removing the mask completely.

Julian Aubourg · Accepted Answer · 2009-03-18 09:24:02Z

3

You can use specific libs like jQuery Validate (or whatever your JS framework offers) on form submit. The other solution is to control the value on the keyUp & blur events but it can become quite messy to decide what to do with ill-formated entry (especially when the format is a bit complex -- ie not just undesired characters). So, all in all, I'd recommend client-side control on submit.

answered Mar 18, 2009 at 9:24

Julian Aubourg

11.4k1 gold badge31 silver badges29 bronze badges

Collectives™ on Stack Overflow

restrict user input using javascript

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related