NumericTextBox for ASP.NET

• Download NumericTextBox_demo.zip - 4.8 KB
• Download NumericTextBox_src.zip - 23.3 KB

Introduction

All applications must be "stupids-proof", so we are creating controls that check users input, this is one of them. On this website I found only the solution for windows forms, so I'm presenting my solution for ASP.NET.

At the begining there was an idea of a control, that with these abilities:

• Optional entering negative numbers
• Optional enetring decimal numbers or integers
• Choose or load the decimal separator automatically from locale settings
• Handling Ctrl + V
• Cross-browser compatability

Solution - points of Interest

• Handling all characters - in the end I chose the "onkeypress" event, because if the function which is fired on this event returns false, the character will not be inserted into the textbox
• Filtering characters - All characters have a keyCode, so I had to make a list of allowed characters (numbers inserted by numpad buttons have different codes than numbers inserted by the top line of a keyboard), also the functional keys like Shift, BackSpace, Delete and arrows must be allowed - just a few minutes of testing
• Optional minus sign - The minus sign must be the first character of the value, so I had to check the cursor position that means problems with compatability, in the end solved like this:

          function getCursorPosition(txt)
          {
              if(document.selection) // IE
  
              {
                  txt.focus();
                  var oSel = document.selection.createRange();
                  oSel.moveStart('character', -txt.value.length);
                  return oSel.text.length;
              }
              else(txt.selectionStart) // Firefox etc.
  
                  return txt.selectionStart;
          }
          

• Optional decimal separator - which one? - This control allows entering decimals or integers, but different countries use different decimal separator, so I made a function that loads the settings dynamically from culture settings:

          private char GetDecimalSeparatorFromLocale()
          {
              return (System.Globalization.CultureInfo.CurrentUICulture.NumberFormat.NumberDecimalSeparator.ToCharArray())[0];
          }
          

• The decimal separator must meet several conditions:
  • must not be the first character
  • must not follow a minus sign
  • there must be only one decimal separator in the value
  
  this "beatiful" condition checks all of these conditions:

          if(txt.value.replace("-", "").length > 0 && getCursorPosition(txt) > 0 && txt.value.indexOf(decimalSeparator) == -1 && decimals)
              return true;
          else
              return false;
          break;
          

• Handling Ctrl + V - I tried many ways to solve this problem, in the end, the simplest one worked best, on the "onchage" event a check function is fired. This function checks all characters if they are allowed or not, leave only numbers and optionally a minus sign and a decimal character

          function CheckString(txt, negative, decimals, decimalSeparator) 
          {
              var res = ""; 
              var decimalSeparatorCount = 0;
              for(i = 0; i < txt.value.length; i++)
              { 
                  if(i == 0 && txt.value.charAt(0) == "-" && negative) 
                      res = "-";
                  else 
                  { 
                      if(IsNumber(txt.value.charAt(i))) // IsNumber function returns true if the char is 0-9
  
                          res += txt.value.charAt(i); 
                      else 
                      {
                          if(txt.value.charAt(i) == decimalSeparator && decimalSeparatorCount == 0 && decimals)
                          { 
                              res += txt.value.charAt(i);
                              decimalSeparatorCount++;
                          }
                      }
                  }
              }
              txt.value = res;
          }
          

• Cross-browser compatability
  • IE 6,7 have, as I metioned, problem with getting cursor position
  • Safari returns different keyCode for functional keys - return 0 for all keys, but codes for numbers and other disallowed characters work fine
  • Tested browsers: IE 6,7, Opera 9, Firefox 2, Safari for windows beta 3, Netscape 8 (same as firefox, it uses Gecko engine)

Using the code

Using this code is simple because it inherits the TextBox class, so you can use validators and access the value in the Text property.

    <cp:NumericTextBox AllowNegative="true" AllowDecimals="true" runat="server" ID="NumericTextBox1" />

This control is mainly based on javascript, so it can be easily used in other platforms such as PHP, JSP etc. as well as in ASP.NET, if you translate it, please let me know.

You must Sign In to use this message board.

FAQ  Noise Tolerance Very HighHighMediumLowVery Low  Search Messages    Layout Expand All MessagesThread ViewNo Javascript (slow)No Javascript Preview    Per page 102550

Msgs 1 to 11 of 11 (Total in Forum: 11) (Refresh) FirstPrevNext

Incorect format foczka 3:47 30 Nov '07   Ex: you can enter: 1217612----,12838123,,,,128731283 That's not a number... Sign In·View Thread·PermaLink Re: Incorect format Lukas Holota 9:07 30 Nov '07   when typing or pasting? which browser? Have questions? try my e-mail l.holota[at-sign]seznam.cz Sign In·View Thread·PermaLink Copy/Paste foczka 3:46 30 Nov '07   You don't check if the pasted text is correct... Sign In·View Thread·PermaLink Re: Copy/Paste Lukas Holota 9:03 30 Nov '07   i do - if you paste text, then you leave the control and the onchange event is fired, that checks whole string Have questions? try my e-mail l.holota[at-sign]seznam.cz Sign In·View Thread·PermaLink good job sgraf4711 7:26 23 Oct '07   lukas! good job, works fine. I added the following row to your OnInit-function : base.Attributes.Add("onblur", string.Format("CheckString(this, {0});", _params)); now a check will always perform (even after copy some text via CTRL-V) thanks Sign In·View Thread·PermaLink Re: good job Lukas Holota 3:28 5 Nov '07   thanks, it is already performed, because the onchange event is fired everytime the onblur event is fired, but only if the text was changed, so it is fired only if it is needed Have questions? try my e-mail l.holota[at-sign]seznam.cz Sign In·View Thread·PermaLink Use TryParse Jacques Bourgeois 6:31 16 Oct '07   Instead of writing your own checking function, use the TryParse function that comes with all the numeric types. It does the same thing, in an easier way, and with a few extra features, such as making the difference between the types that accept a decimal separator and those that don't. Jacques Bourgeois Sign In·View Thread·PermaLink Re: Use TryParse Lukas Holota 8:21 16 Oct '07   You mean instead of IsNumber or CheckString function? Have questions? try my e-mail l.holota[at-sign]seznam.cz Sign In·View Thread·PermaLink Re: Use TryParse Jacques Bourgeois 9:03 16 Oct '07   Instead of both. Parse and TryParse are conversion (cast) functions that enables you to convert from a String to another type. Parse is good when you are sure that the value can be converted, which is not the case here. TryParse would be better since it does not triggers an exception if the conversion fails, it tells you by the return value. It has many advantages over IsNumber and CheckString as implemented : - It automatically gets the decimal separator, but you can also force it into accepting a specific culture instead of the system's culture. - Not only does it checks for validity, but it also returns the converted value in the correct number type. No need to recast the result later on. - Since there is a parse for each type of numeric type, it automatically adjust for the acceptance or non acceptance of decimals, prevents overflows, reject a minus sign for a Byte, etc. - Since each type of numeric type provides its own parsing methods, it is probably more efficient than a single method that tries to do everything. Jacques Bourgeois Sign In·View Thread·PermaLink Re: Use TryParse Lukas Holota 9:30 16 Oct '07   this question might sound very stupid, but are we talking about javascript? I know the methods you metioned from .NET, but in javascript? I read something about new parse functions for javascript, but they have problems with browser compatability, so I made it myself as simple as possible Have questions? try my e-mail l.holota[at-sign]seznam.cz Sign In·View Thread·PermaLink Re: Use TryParse Jacques Bourgeois 12:12 16 Oct '07   Ooops. Did not got the small subtilities that show that it is in JavaScript, which I do not use. Why did they had to copy it when they designed C#? Jacques Bourgeois Sign In·View Thread·PermaLink

Last Visit: Friday, November 21, 2008 9:14 PM     Last Update:Friday, November 21, 2008 9:14 PM