Limit a Textbox to Numeric Only with CSS

Given a plain old asp textbox, is there a way to only allow numeric input using CSS. Can't find it in the book, but this seems like it should be obvious.
LVL 1
kwebster7327Asked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
Check this:
<input type=text" name="mynumber" onKeyUp="if(this.value.match(/\D/))this.value=this.value.replace(/\D/g,'')" >

Open in new window

0
 
käµfm³d 👽Commented:
Not with CSS, but with javascript you could.
function IsNumeric(strString)
   //  check for valid numeric strings	
   {
   var strValidChars = "0123456789.-";
   var strChar;
   var blnResult = true;
 
   if (strString.length == 0) return false;
 
   //  test strString consists of valid characters listed above
   for (i = 0; i < strString.length && blnResult == true; i++)
      {
      strChar = strString.charAt(i);
      if (strValidChars.indexOf(strChar) == -1)
         {
         blnResult = false;
         }
      }
   return blnResult;
   }

Open in new window

0
 
käµfm³d 👽Connect With a Mentor Commented:
This might be better:

http://javascript.internet.com/forms/validate-numeric-only.html

<!-- Paste this code into an external JavaScript file named: validNum.js  -->
 
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Manzi Olivier :: http://www.imanzi.com/ */
 
// calculate the ASCII code of the given character
function CalcKeyCode(aChar) {
  var character = aChar.substring(0,1);
  var code = aChar.charCodeAt(0);
  return code;
}
 
function checkNumber(val) {
  var strPass = val.value;
  var strLength = strPass.length;
  var lchar = val.value.charAt((strLength) - 1);
  var cCode = CalcKeyCode(lchar);
 
  /* Check if the keyed in character is a number
     do you want alphabetic UPPERCASE only ?
     or lower case only just check their respective
     codes and replace the 48 and 57 */
 
  if (cCode < 48 || cCode > 57 ) {
    var myNumber = val.value.substring(0, (strLength) - 1);
    val.value = myNumber;
  }
  return false;
}
 
 
 
<!-- Paste this code into the HEAD section of your HTML document.
     You may need to change the path of the file.  -->
 
<script type="text/javascript" src="validNum.js"></script>
 
 
 
<!-- Paste this code into the BODY section of your HTML document  -->
 
<form name="myForm" method="post" action="#">
  Enter an integer here: <input name="txtNumber" type="text"
    id="txtNumber" onKeyUp="javascript:checkNumber(myForm.txtNumber);">
</form>

Open in new window

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
kwebster7327Author Commented:
Kaufmed: almost a winner until I saw Zvonko's minimalist approach.
0
 
S ConnellyTechnical WriterCommented:
How is that an accepted solution when the code is broken? Okay... a slight nitpick... but here is a corrected version with the size options included.

<input type="text" name="Zipcode" onKeyUp="if(this.value.match(/\D/))this.value=this.value.replace(/\D/g,'')" size="10" maxlength="5" />
0
 
ZvonkoSystems architectCommented:
There are tons of open questions where you can show how expert you are and you do here unsolicited posts? Where do you read here Zip was required except in your comment???
And you copied my code without to reference that it was MY solution!

Now you either apologise for your wrong extension or you show where my code was broken.
0
 
S ConnellyTechnical WriterCommented:
Zvonko: Whoa there! Calm down... Perhaps I should have put a smiley face on my response. But I am sorry if I offended you.

What I meant was the error was in missing the open quote before text. I had actually written more after the corrected code but, for some darn reason the rest of my message is not there.

You had wrote: [<input type=text"....]
When it should be [<input type="text"....]

BTW, this is a variation of the method I use but kudos to you. Your code contribution is more elegant than mine. That was something else that should have been in my response.

Can we live in peace now? :-)
0
 
ZvonkoSystems architectCommented:
Uhps, that missing quote character I have not noticed. You are right, my apologies to you <|;-)
0
 
S ConnellyTechnical WriterCommented:
No prob. my original posting was misleading. I should have read it after I posted it.... then I would have noticed that 1/2 of it was missing. Take care! I'm going to sleep now. :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.