blocking chars from being input in a textbox

Vermelh0

08-21-2002, 09:49 PM

How can I block a user from entering chars in a textbox? I want a textbox to contain only numbers, and I really don't want to test, when a control loses focus, whether it has valid input.
Thanks,
V

Roy Sinclair

08-21-2002, 10:06 PM

Try this:

<html>
<head>
<title>Testing</title>
<script>
function checkForNum(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
</head>
<body>
<form name="tstForm">
<input id="tstField" type="text" size="10" onkeypress="return checkForNum(event);"></input>
</form>
</body>
</html>

rinky dink

08-21-2002, 10:30 PM

This is a part of my program im writing, bascially it monitors the
text box and when a key is pushed it checks to see if it valid.
in my case it checks for letters. but if you enter just number 0-9
it will work fine too. iI hope this is what your looking for.

:thumbsup:

function validate_entry()
{
var keycode
var keycharacter

keycode = window.event.keyCode // determine the key's code number
keycharacter = String.fromCharCode(keycode); // determine the key's character, a,b,c etc

if ((("abcdefghijklmnopqrstuvwxyz").indexOf(keycharacter) > -1)) // characters allowed a to z here
{
return true; // need
}
else if ((window.event.keyCode == 32) || (window.event.keyCode == 13)) // 32 = space bar 13 = enter, used to activate input
{
romaji_input(); // goto switch function to check for combinations like ya, yu, yo
}
else
return false
}

<INPUT type="text" name="romajiinput" value="" size="5" maxlength="3" onkeypress="return validate_entry()">

whammy

08-22-2002, 12:25 AM

You will very likely have problems with the above solutions with Netscape and/or Opera, as onkeypress and other "onkey" stuff may not work with them... I'd suggest doing something like:

<input type="text" onkeypress="OneOfTheFunctionsAbove()" onblur="this.value=this.value.replace(/\D/g,'')" />

For the browsers that don't handle onkeypress or onkeydown right...

I know you really don't want to wait until the "control loses focus", but unfortunately with some of the browsers still in use, you pretty much have to (but like I said, call the other function first, then if the browser uses that you're ok). :(

Of course, regular expressions don't work in really really early browsers like NS3 but if anyone is still using them, they must get errors constantly no matter where they go! That's my philosophy, and I'm sticking to it. ;)

joh6nn

08-22-2002, 12:50 AM

you might want to take a look at this, before implementing that sort of functionality:
http://www.evolt.org/article/Usable_Forms_for_an_international_audience/4090/15118/index.html

whammy

08-22-2002, 09:29 PM

That's a great article!

Vermelh0

08-23-2002, 10:46 PM

Thanks for all your help...
I was able to combine the two scripts on top into one that suited my needs, but I need one more thing. On the keydown event, I need to check if the new value will go over a limit and if that happens cancel the event and alert the user.
My problem is that I need to convert the event.keycode into a number and add it to the value of the textbox and then compare it to my max value. I did everything, but converting the keycode into a number. I think I already saw native support in javascript for converting the keycode, but I can't find it any samples.
Can anyone help?
Here's my code:
function __checkInt(evt, valmax)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
{
return false;
}

if ((valmax != 0) && (evt.srcElement.value + (something) > valmax))
{
alert('Value cannot be greater than ' + valmax);
return false;
}
return true;
}

whammy

08-24-2002, 01:03 AM

Is this a text field or a textarea?

If it's just a text field use maxlength="20" or whatever... if it's a textarea I have a pretty solid (pardon the pun) textarea script that works cross-browser on my website that you can reference.

Vermelh0

08-24-2002, 02:32 AM

It's a textfield. I'm already using the maxlength property, but that doesn't always work. For instance, what if the max value allowed is 2025? The maxlength property can't do anything about that...
V

whammy

08-24-2002, 03:40 AM

You lost me somewhere.

Vermelh0

08-24-2002, 03:53 AM

INPUT type="text" name="idText" value="" size="4" maxlength="4">

Ok, take the following textfield. The biggest number I can input is '9999', right? What if, I want to declare that the biggest number a user should input in there is not '9999', but '2000'?
See my dilemma?
V

Philip M

08-24-2002, 09:45 AM

function testthevalue(){
idNumber=idText; // a string
idNumber=idNumber+0; // a number
if idNumber>2000{
alert ("2000 is maximum allowed);
return false;
}