use Javascript "Onkeypress" command to accept only "numeric"

Dev Shed Forums Sponsor:

August 17th, 2004, 11:04 PM

jomargon

Registered User

Join Date: Aug 2004

Posts: 6

Time spent in forums: < 1 sec
Reputation Power: 0

use Javascript "Onkeypress" command to accept only "numeric"

Good day. Is there a way to filter typed inputs right upon typing the characters using Javascript? i plan on using Javascript's "Onkeypress" command to accept only "numeric, i.e., 1,2,3...", ". (dot)", and ", (comma)" command. please help.thanks in advance.

August 18th, 2004, 12:37 AM

titania

Registered User

Join Date: Jun 2004

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

As for IE

If browser is only IE, like this.

Code:

function element_keypress() {
  // nonumber , It doesn't react.
  if(!(event.keyCode>=0x30 && event.keyCode<=0x39)) {
     event.returnValue = false;
  }
}

but the other browser, I don't know.

sorry.

August 18th, 2004, 09:29 AM

Dusk

Twilight Thinking

Join Date: Feb 2003

Location: Oxford UK

Posts: 656

Time spent in forums: 1 Week 6 Days 4 h 40 m 3 sec
Reputation Power: 36

Use regular expressions, ie:

Code:

function doIt()
{
	entry = document.getElementById('number').value;
	pattern = /[^0-9.,]/g;
	if (entry.match(pattern))
	{
		alert("Invalid characters present!");
	}
	else
	{
		alert("All ok!");
	}
}

and the form:

Code:

<form>
<input type="text" name id="number" />
<input type="button" value="Test It" onclick="doIt();" />
</form>

Hope that helps

__________________
Cheers,
Dusk

My portfolio

August 18th, 2004, 11:46 AM

mikepurvis

Contributing User

Join Date: Aug 2004

Location: Toronto

Posts: 51

Time spent in forums: 47 m 33 sec
Reputation Power: 8

I asked this exact question not too long ago...

The solution that I arrived at was this:

PHP Code:


		
			
<html>

<head>



<script type="text/javascript">

<!--

var validNums = '0123456789.';

var validInt = '0123456789';

var validLetters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';



function validateKeyPress(e, validSet)

{

    var key;

    var keychar;

        

    if(window.event || !e.which) // IE

        key = e.keyCode; // IE

    else if(e) 

        key = e.which;   // Netscape

    else

        return true;     // no validation



    keychar = String.fromCharCode(key);

    validSet += String.fromCharCode(8);



    if (validSet.indexOf(keychar) < 0)

      return false;



    return true; 

}

//-->

</script>



</head>

<body>

    <form name="myForm">

        <input type="text" size="50" onKeyPress="return validateKeyPress(event, validNums)" />

    </form>

</body>

</html>

Keep in mind that this won't prevent invalid characters from being pasted into the box... you'd need an onChange or something to trap that. But I think the easier thing is to just use this and then validate server-side as well. (which should be done anyways, what with form-spoofing and all)