?
Solved

Limit a Textbox to Numeric Only with CSS

Posted on 2009-04-30
9
Medium Priority
?
2,288 Views
Last Modified: 2012-05-06
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.
0
Comment
Question by:kwebster7327
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 24273451
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
 
LVL 75

Assisted Solution

by:käµfm³d 👽
käµfm³d   👽 earned 800 total points
ID: 24273473
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 1200 total points
ID: 24273583
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Closing Comment

by:kwebster7327
ID: 31576609
Kaufmed: almost a winner until I saw Zvonko's minimalist approach.
0
 
LVL 4

Expert Comment

by:Shawn Connelly
ID: 24523518
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 24523887
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
 
LVL 4

Expert Comment

by:Shawn Connelly
ID: 24524027
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 24524041
Uhps, that missing quote character I have not noticed. You are right, my apologies to you <|;-)
0
 
LVL 4

Expert Comment

by:Shawn Connelly
ID: 24524086
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question