I need a text box that only accepts numbers

11 posts, 0 answers
  1. Matt
    Matt avatar
    23 posts
    Member since:
    Mar 2011

    Posted 18 Nov 2011 Link to this post

    I need a text box that only accepts numbers. I have tried using a regular rad text box with all kinds of key press events and a bunch of other garbage, but I could never get it to work. I have tried a numeric text box but it keeps changing my numbers i type in for some reason. This box is for credit card numbers, so 16 length and all numbers. When I used a numeric textbox and tried typing in the credit card number, the number would be changed by the text box after leaving focus. I have no idea what that is all about or how that is useful to anyone but clearly I can't use that control. What can I do?
  2. Matt
    Matt avatar
    23 posts
    Member since:
    Mar 2011

    Posted 18 Nov 2011 Link to this post

    Well I figured out what I needed.

    <telerik:RadTextBox ID="txtCCNumber" runat="server" Style="position: absolute; left: 113px; top: 31px; font-family: Segoe UI; font-size: 8pt;" MaxLength="16" >
        <ClientEvents OnKeyPress="numberOnly" />
    </telerik:RadTextBox>
     
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
    <script type="text/javascript">
           function numberOnly(sender, eventArgs)
      {
       var k = eventArgs.get_keyCode()
       if (!(k >= 48 && k <= 57))
       {
         eventArgs.set_cancel(true);
       }
      }
    </script>
    </
    telerik:RadCodeBlock>


    (needed codeblock because of ajax use)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 19 Nov 2011 Link to this post

    Hello,

    You can also same thing by using below code snippet.

    <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" MinValue="48"
           MaxValue="57">
           <NumberFormat DecimalDigits="0" />
       </telerik:RadNumericTextBox>


    Thanks,
    Jayesh Goyani
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Nov 2011 Link to this post

    Hello Matt,

    Try the following javascript in order to enter only numbers in RadTextBox.
    <script type="text/javascript">
     function keyPress(sender, args)
        {
            var text = sender.get_value() + args.get_keyCharacter();
            if (!text.match('^[0-9]+$'))
           args.set_cancel(true);
        }
    </script>

    Also you can achieve the same with a RadNumericTextBox as explained in this documentation.
    RadNumericTextBox Basics

    -Shinu.
  6. Matt
    Matt avatar
    23 posts
    Member since:
    Mar 2011

    Posted 21 Nov 2011 Link to this post

    Jayesh, Numeric textbox doesn't work for credit card numbers. I guess a 16 digit number is to big for it and it changes it to some max value. Also, I need numbers that can start with 0 which numeric text box will get rid of.

    Shinu, it was your example i had tried earlier and couldn't get to work. Not really sure what the  getvalue + getkeycharacter is supposed to be doing. The regex isn't really what i am looking for either.

    For what I was doing my solution worked best for me. Thanks for the help though.
  7. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 23 Nov 2011 Link to this post

    Hello Matt,

    You could have used the RadMaskedTextBox for you scenario. Like so:

    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" PromptChar="_" Mask="#### #### #### ####" DisplayMask="#### #### #### ####">
    </telerik:RadMaskedTextBox>

    In the Mask, I've set to only accept numbers and the length being 16. You could remove the spaces in between the number signs, if that's not how you want them formatted, but all in all it should achieve what you wanted.

    I hope that helps.
  8. Jiju
    Jiju avatar
    57 posts
    Member since:
    Jul 2011

    Posted 23 Feb 2012 Link to this post

    Hello Matt,
    I have tried your code and it works in all browsers except firefox. when using in firefox the paste event not works. I can paste the numbers by right click , then paste, but i cannot paste using Ctrl+V.
    Is there any solution for this?
  9. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 24 Feb 2012 Link to this post

    Hello Jiju,

    I tried the Kevin's code and I am able to paste numbers using CTRL + V in Firefox 10 on my machine.
    Can you enable the script debugging in the Firefox (download Firebug if you don't have other tool) and see if you are getting some JavaScript error when pasting.

    Kind regards,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Jiju
    Jiju avatar
    57 posts
    Member since:
    Jul 2011

    Posted 25 Feb 2012 Link to this post

    Hi,
    thanks for your reply,
    I want to use Radtextbox insted of RadMaskedTextBox. Is there any solution for this?
  11. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 27 Feb 2012 Link to this post

    Hi Jiju,

    If you like to follow the Matt's solution, and in the same time to allow copy/paste values and pressing keys like backspace, delete and etc in Firefox you will need to add additional checks for all these keys in the condition of numberOnly function. You could place a debugger to see the actual keyCodes when pressing your combinations.

    Regards,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  12. Gowtham
    Gowtham avatar
    7 posts
    Member since:
    Jun 2013

    Posted 08 Apr 2014 in reply to Matt Link to this post

    thanks your  information
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017