This is a migrated thread and some comments may be shown as answers.

I need a text box that only accepts numbers

10 Answers 1404 Views
Input
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 18 Nov 2011, 07:38 PM
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?

10 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 1
answered on 18 Nov 2011, 11:05 PM
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)
0
Jayesh Goyani
Top achievements
Rank 2
answered on 19 Nov 2011, 11:59 AM
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
0
Shinu
Top achievements
Rank 2
answered on 21 Nov 2011, 05:04 AM
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.
0
Matt
Top achievements
Rank 1
answered on 21 Nov 2011, 06:30 AM
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.
0
Kevin
Top achievements
Rank 2
answered on 23 Nov 2011, 02:36 PM
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.
0
Jiju
Top achievements
Rank 1
answered on 23 Feb 2012, 10:01 AM
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?
0
Vasil
Telerik team
answered on 24 Feb 2012, 02:42 PM
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.
0
Jiju
Top achievements
Rank 1
answered on 25 Feb 2012, 07:27 AM
Hi,
thanks for your reply,
I want to use Radtextbox insted of RadMaskedTextBox. Is there any solution for this?
0
Vasil
Telerik team
answered on 27 Feb 2012, 05:22 PM
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.
0
Gowtham
Top achievements
Rank 1
answered on 08 Apr 2014, 02:16 PM
thanks your  information
Tags
Input
Asked by
Matt
Top achievements
Rank 1
Answers by
Matt
Top achievements
Rank 1
Jayesh Goyani
Top achievements
Rank 2
Shinu
Top achievements
Rank 2
Kevin
Top achievements
Rank 2
Jiju
Top achievements
Rank 1
Vasil
Telerik team
Gowtham
Top achievements
Rank 1
Share this question
or