Only allow numbers in input

[wysiwyg]

Hi,
I'm trying to make it impossible (well, sure, you could turn off js, but anyway) to type in anything but numbers in an input.

I started with on keyup removing anything that is not 0-9, and that worked, but the problem is that the letter you type in shows for a milisecond or so, and I don't want that.

So I tried to prevent the default action, so nothing would be entered in the input unless I say so, using the event object to detect which key was pressed and then inserting it into the input if it was 0-9. Also worked, but it breaks if I were to press the arrows to add a number in the beginning, because I just append the number at the end of the input value.

Is there a way to do this?

[jtrelfa]

I started with on keyup removing anything that is not 0-9, and that worked, but the problem is that the letter you type in shows for a milisecond or so, and I don't want that.

Seems like overkill to worry about that millisecond - the keyup method is what I've typically used and it's worked fine.

If you want to use a keypress method, you'll have to specify which specific keys are allowed to be pressed within the control (arrows, tab, delete, backspace, etc) to ensure you don't break existing functionality. This would require some sort of switch statement or array loop to check which key was pressed each time - which could delay more than a millisecond?

[wysiwyg]

Well, I would only define the keydown-event on the input, and the only keys I would have allow except 0-9 would be F5, Del, backspace and left and right arrows (perhaps 2-3 more), and that check did not take enough time for my eye to notice it. It works fine, the only problem I have is if the user presses the left arrow and wants to add a number at the start.

[jtrelfa]

One thing I've used to troubleshoot this sort of thing is to use a debugger function (bear in mind, it's a kludge):

<input type='text' onkeypress="capt(event)" />
<div id="messages"></div>

function capt(evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  document.getElementById("messages").innerHTML += "code=" + charCode + "<br />";
}

It's a good way to ensure that you're capturing all the codes you want to allow. Hope this helps.

[wysiwyg]

I have something like that to, but that's not my problem. My problem is that if you type in:
111111

And then place the marker (is that the correct word btw?) so it looks like this:
111|111

and then you type 2, you'd expect the result to be:
1112111

but it will be:
1111112

because I don't know how to check where the marker is in the text, so the number you type in just gets appended to the value.

[jtrelfa]

That sounds like you're using your JS code to manipulate the text input rather than just return true or false. If the js was inline, it would be something like:

<input onkeypress="return allowedKey(event);">

Then it doesn't matter where the user types in something...the function should only check what key was pressed and return true or false. Then you don't have to constantly manipulate the .value property of the form control.