Allowing/Preventing charCodes in INPUT

**bonkedproducer** · Jan 6, 2007, 16:39

Ok, I'm having a devil of a day trying to find out how to do this and search and google are not being friendly.

I need to prevent a user from entering any keystrokes other than numerics, the decimal, and the "-" key (and if possible, ensure they don't enter more than 2 decimals, or already have a 0.00 and fill from left) in a HTML input field.

I have found numerous solutions that would limit users to only numerics, but didn't allow the decimal, or numerous ones that would wait until the user has finished the form, and them prompt them with an error.

What I really want is something that just ignores other keystrokes, like this:

<HTML>
<HEAD>
<SCRIPT language=Javascript>

</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)"
type="text" name="txtChar">
</BODY>
</HTML>

But also allow the period (Keycode 190) the decimal (Keycode 110) and strip anything past a second decimal on the fly without the user having to deal with an alert box. Anyone know of a script to do this, or how to modify what I have above to do this?

**mrhoo** · Jan 6, 2007, 21:08

I prefer using the keyup event over keypress.
If you hijack the input on keypress, there is no clue to the user what is wrong- they may think they lost focus on the text box.

Using keyup, an invalid character appears when they press the key, then disappears when they release it. They can see what is going on.

You could make it a tight little anonymous function assigned to the element, or make it a function you can call from any input, as your example uses.

Regular expressions are easier to filter with than keyCodes for all but the simplest matches, so that's what I use here.

document.getElementById('txtChar').onkeyup= validate_signedFloats;

function validate_signedFloats(e){
// get the textbox and its value
var who= window.event? event.srcElement: e.currentTarget;
var txt= who.value, M;
if(!txt) return;

// remove characters never allowed:
txt= txt.replace(/[^\d\-\.]/g,'');

// remove any minus signs that are not the first character
txt= txt.charAt(0)+ txt.substring(1).replace(/\-/g,'');

//If there is more than one decimal period, remove all after the first

while( (M= txt.match(/(\.)/g) ) !=null){
if(M.length== 1)break;
txt= txt.slice(0,-1);//this works because you process each character
}
who.value= txt;
}

**bonkedproducer** · Jan 8, 2007, 20:30

Originally Posted by mrhoo

I prefer using the keyup event over keypress.
If you hijack the input on keypress, there is no clue to the user what is wrong- they may think they lost focus on the text box.

Using keyup, an invalid character appears when they press the key, then disappears when they release it. They can see what is going on.

Thanks for the reply - sorry the thanks came so late, this seems to be what I am looking for - now here's a real kicker, how hard would be to check on Keyup if the value is <= 0.00 and change the style to "color:red"?

The SitePoint Forums have moved.

User Tag List

Thread: Allowing/Preventing charCodes in INPUT

Thread Tools

Display

Allowing/Preventing charCodes in INPUT

Bookmarks

Bookmarks

Posting Permissions