PDA

View Full Version : JS Allow Only Numbers in the Input Field


audiohominis
August 17th, 2009, 01:40 AM
Hi folx.
I'm looking to restrict a field to numeric input.
The following neat example from w3schools (http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeydown) shows how to achieve the exact opposite of that - blocking only numbers.

<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>
Type some text (numbers not allowed):
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</body>
</html>
I found that removing the exclamation mark (!) on line #19: (return !numcheck.test(keychar);) switches it to allowing only numbers. However, as a consequence, such keys as Shift, Ctrl, Home, End, Insert, Delete, Backspace, etc are also blocked, so some of the useful functionalities, e.g. user's ability to Shift-select are disabled.

Question: How do I modify this code so the input field would accept only numbers without compromising those basic text editing functionalities or the concise elegance of the code.
Thank you much.

PS. I never explored JavaScript before.
Swooter
August 17th, 2009, 09:36 AM
use the isNaN() method
audiohominis
August 17th, 2009, 12:13 PM
use the isNaN() method
Could you be more specific, please. I'm a JS n00b. :emb:
Exaactly how would I apply isNaN() here?
Swooter
August 18th, 2009, 04:55 AM
Hmm... if you don't only want to check whether there are numbers, but also remove them, use something like:

<html>

<body>

<script type="text/javascript">
function noNumbers(field) {
for ( var i = 0; i < 10; i++ ) {
field.value = field.value.split(i).join("");
}
}
</script>

<form>
Type some text (numbers not allowed):
<input type="text" onkeyup="noNumbers(this);" />
</form>

</body>

</html>
simplistik
August 18th, 2009, 11:12 AM
Could just change the modifier in the regex currently it's set to


numcheck = /\d/;

the modifier is \d which means digit, i think if you change it to


numcheck = /\D/;

it changes it to any non-digit

of course after you've done that you may want to change the var name from numcheck to something like charcheck, something that relates to what it's doing more appropriately
audiohominis
August 18th, 2009, 02:02 PM
Hmm... if you don't only want to check whether there are numbers, but also rem
Truth be told that had already occurred to me.
Firstly, notice how in the example I supplied the undesirable characters never make it to the field in the first place, whereas in your example, while the numbers are immediately removed on key up event, they still show their faces when the key is pressed. I would be willing to settle for that if I weren't so convinced that a much more elegant, regular expression-based solution was out there. :book:
Secondly, your proposed solution misses a non-trivial point I made immediately below the code snippet - Standard text editing capabilities are crucial. What you provided, does not allow for things like using the arrows keys to move the insertion point along the line or selecting a desired number of adjacent characters by moving the highlighter while holding down the Shift key, and so forth. I'm pretty sure you know what I mean :hr:

Could just change the modifier in the regex currently it's set to


numcheck = /\d/;
the modifier is \d which means digit, i think if you change it to


numcheck = /\D/;
it changes it to any non-digit
of course after you've d...
That too misses the point, see :hr:

In any case, I really appreciate your responses, guys. However, the winner has yet to come.:hugegrin:
jwilliam
August 19th, 2009, 02:07 PM
How about this:



<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;
}

if((keynum >= 48) && (keynum <= 57)) {
return(true);
}

var good_codes = [8, 14, 15, 37, 38, 39, 40];
for(i = 0; i < good_codes.length; i++) {
if(good_codes[i] == keynum) {
return(true);
}
}

return(false);
}
</script>
<form>
Type some text (numbers not allowed):
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</body>
</html>
audiohominis
August 20th, 2009, 01:22 AM
How about this:



<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;
}

if((keynum >= 48) && (keynum <= 57)) {
return(true);
}

var good_codes = [8, 14, 15, 37, 38, 39, 40];
for(i = 0; i < good_codes.length; i++) {
if(good_codes[i] == keynum) {
return(true);
}
}

return(false);
}
</script>
<form>
Type some text (numbers not allowed):
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</body>
</html>

NOW we're talkin':rock: It's not regExp-based but it'll definitely do. I'll just add a couple more chars to the array of the acceptables:
var good_codes=[8,9,14,15,35,36,37,38,39,40,45,46,96,97,98,99,100, 101,102,103,104,105,144];
...and a giant astronomical gracias to you, jwilliam!:beer:
jwilliam
August 20th, 2009, 09:22 AM
Glad to help, sir :)