Javascript to Only Accept Numeric / Decimal Values

Posted: August 17, 2010 in ASP.Net, Javascript

If you need to format a control to only accept numeric or decimal values, you can use a little bit of Javascript with ASP.Net for when the user enters something in the text box control for example.

ASP.Net
First bind the onkeydown event to the text box control that you want to apply formatting on as follows:

 
' Bind javascript to text box control
txtTextBoxNumbers.Attributes.Add("onkeydown", "javascript:return jsNumbers(event);")

' Bind javascript to text box control
txtTextBoxDecimals.Attributes.Add("onkeydown", "javascript:return jsDecimals(event);")

Javascript
Now add the following Javascript code to the page that has the control to format:

 
<script type="text/javascript">
   //-------------------------------------------
   // Function to only allow numeric data entry
   //-------------------------------------------
   function jsNumbers(e) 
   {
      var evt = (e) ? e : window.event;
      var key = (evt.keyCode) ? evt.keyCode : evt.which;
      if(key != null) 
      {
          key = parseInt(key, 10);
          if((key < 48 || key > 57) && (key < 96 || key > 105)) 
          {
              if(!jsIsUserFriendlyChar(key, "Numbers"))
              {
                  return false;
              }
          }
          else 
          {
              if(evt.shiftKey)
              {
                  return false;
              }
          }
      }
      return true;
   }        
   
   //-------------------------------------------
   // Function to only allow decimal data entry
   //-------------------------------------------
   function jsDecimals(e)
   {
      var evt = (e) ? e : window.event;
      var key = (evt.keyCode) ? evt.keyCode : evt.which;
      if(key != null) 
      {
          key = parseInt(key, 10);
          if((key < 48 || key > 57) && (key < 96 || key > 105)) 
          {
              if(!jsIsUserFriendlyChar(key, "Decimals"))
              {
                  return false;
              }
          }
          else 
          {
              if(evt.shiftKey)
              {
                  return false;
              }
          }
      }
      return true;
   }        
   
   //------------------------------------------
   // Function to check for user friendly keys
   //------------------------------------------
   function jsIsUserFriendlyChar(val, step) 
   {
      // Backspace, Tab, Enter, Insert, and Delete
      if(val == 8 || val == 9 || val == 13 || val == 45 || val == 46)
      {
          return true;
      }
      // Ctrl, Alt, CapsLock, Home, End, and Arrows
      if((val > 16 && val < 21) || (val > 34 && val < 41))
      {
          return true;
      }
      if (step == "Decimals")
      {
          if(val == 190 || val == 110)
          {
              return true;
          }
      }
      // The rest
      return false;
   }     
</script>   
Advertisements
Comments
  1. anver sadat says:

    nice tutorials…keep it up..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s