Input Area Accept Numbers Only Using Regexp

[george]

I want my input area to accept numbers only, and I am trying to accomplish this using Regular Expressions. My HTML input field is

<input type="text" onkeyup="numsOnly(this);" />

And my JS is this:

	<script type="text/javascript">		function numsOnly(key) {			var Regexp = /^[0-9]*$/;			if (Regexp.test(key)) {				return(key);			} else {				return '';			}		}	</script>

The effect of all this is that I can type anything I want into the field where I want to be able to only type numbers.

[jeffman]

First, you're going about this incorrectly. The this keyword in this context refers to the text input: the thing with width, height, a border, other properties and methods, etc. You cannot treat it like a number.The correct procedure is to pass a reference to the keypress event. From this you can derive the ascii value of the character, which is not in the 0-9 range.The correct return value is a Boolean. True means the text field will receive the character. False means it will not. JavaScript behaves as if the default return value of an event handler is true, so you must explicitly return false if you want to cancel the keystroke.I say that to inform you. Now let's discuss reality.If you reject all key events except those that turn into 0-9, you will reject editing keys also: delete, return, and the arrow keys. This is flat out, no exception, unacceptable user interface.So, you're thinking you can just let the arrow key strokes pass also. Their values are these: left arrow, 37; up arrow, 38; right arrow, 39; down arrow, 40. But this can lead to funky behavior also. A historical bug in browser behavior maps the arrow keys to the same ascii values as % & ' and (. So if you let the arrows pass, you'll have to let those characters pass also. Maybe that's acceptable. Just remember that three of those exist on the number keys, so all it would take is for the user to lean on the shift key, and boom, there they are. So you'll test for the shift key and reject any keystroke that occurs with the shift key down. This will leave the ' character as the possible danger. Forward delete is another matter. It maps to the ascii value of the . character. So you'll have to let it slip by also.These two possibilities should put you on notice that you'll need to validate the input value before you do anything with it.Fortunately, this is a good practice anyway. You never know what's going to happen when a user gets involved. Key strokes are not the only way to enter data. A determined jerk could always paste or drag undesirable characters into the input. I occasionally drag data into a text input accidentally. So you have to validate it before you use it, especially if you plan to do math with it.Whatever you do, don't think this is easy. Key capturing is most effective when you want to trigger behavior, not when you want to cancel it.Here's some really annoying code to illustrate some of the techniques I've mentioned:

function keyCapture (e) {	e = e || window.event;	var k = e.keyCode || e.which;	alert (k + ", " + e.shiftKey);	return false; // cancels all intercepted keystrokes}..<input type="text" onkeypress="return keyCapture(event)">

[chibineku]

The usual caveat when having javascript limit user input: users can turn javascript off. If it's vital to the smooth running of your site/app, it's worth enforcing on the server somehow, too.

[george]

Thanks. I got what I needed from what you gave me.