I need a text box that only accepts numbers

[Matt]

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?

[Matt]

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)

[Jayesh Goyani]

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

[Shinu]

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.

[Matt]

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.

[Kevin]

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.

[Jiju]

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?

[Vasil]

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

[Jiju]

Hi,
thanks for your reply,
I want to use Radtextbox insted of RadMaskedTextBox. Is there any solution for this?

[Vasil]

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

[Gowtham]

thanks your  information