HOW to restrict the user to enter only numaric value

Question

0.00/5 (No votes)

See more:

Hi Guys,

There is a problem in my code.
I have developed a code using javaScript that allows only numeric value to enter in text box, but how can I define it on the on click event ?
Even we know that Text Box does not has on click Event Please help me out.

Thanks in advance
Here is the code.

JavaScript

function NumberOnly()
{
    var AsciiValue = event.keyCode;

    if ((AsciiValue >= 48 && AsciiValue <= 57) || (AsciiValue == 8 || AsciiValue == 127))
       event.returnValue = true;
    else
       event.returnValue = false;
}

HTML

<input type = "text" id = "text1"  önkeypress = "return NumberOnly()" >

Posted 24-Aug-12 6:57am

Abhimanyu vij

Updated 24-Aug-12 7:11am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v3

Add a Solution

Comments

[no name] 24-Aug-12 13:04pm

Do you mean the onfocus event of the textbox?

Abhimanyu vij 24-Aug-12 13:12pm

there is no such kinDA OF EVENT IN THE TEXTBOX i think

Sandip.Nascar 24-Aug-12 13:19pm

Who said to you, text box doesn't have any onclick event?
<input type="text" id="text1" önclick="javascript:void(0);" />

Abhimanyu vij 24-Aug-12 13:22pm

when i am trying to write it in the textbox it does not show even it shows only ontextchanged

4 solutions

Solution 6

Take a look at this jquery plugin, i've used it a few times and it works pretty good. http://www.decorplanit.com/plugin/[^]

One other thing I would do is validate the control server side as well. A user can always by pass your validation client side with firebug or some similiar debugging tool so once the page is posted back just do a double check on the control that the textbox value is actually an integer.

C#

int.TryParse(txtBox.Value, out tmpInt)

Hope that helps

Posted 25-Aug-12 11:58am

Brandon Caruana

Comments

fjdiewornncalwe 28-Aug-12 9:59am

Agreed that validation has to take place on the server. It is never good to assume that client side validation has been successful.

Solution 3

You have used event.keyCode inside the javaScript, but you have not passed any event to the function.

You have to do like below.
önkeypress = "return NumberOnly(event)"

If I modify your code then it will look like below.

XML

<HTML>
   <HEAD>
   <SCRIPT language="Javascript">

      function NumberOnly(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }

   </SCRIPT>
   </HEAD>
   <BODY>
      <INPUT id="text1" onkeypress="return NumberOnly(event)" type="text" name="text1">
   </BODY>
</HTML>

It will work for you.

Note: Please change your naming conventions. Don't write id as text1 instead write txtNumber. And for function don't write NumberOnly instead write IsNumberKey.

Thanks...

Posted 24-Aug-12 7:20am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Updated 24-Aug-12 7:22am

v2

Comments

Abhimanyu vij 24-Aug-12 13:31pm

its not working

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Aug-12 13:37pm

Check
How Can I Use Javascript to Allow Only Numbers to Be Entered in a TextBox?
You can find the code and one textbox just above the code labelled as "Try It!", in which you can only enter numbers. Try it...

Solution 4

i think you don't need to use it..

<input type = "text" id = "text1"  önkeypress = "return NumberOnly()" >

instead of it i use this in Page_Load event..and it works fine..

yourTextboxName.Attributes.Add("onkeydown", "return isAlphaNumeric(event.keyCode);");

Posted 24-Aug-12 7:55am

ridoy

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

fjdiewornncalwe · Accepted Answer · 2012-08-24T09:36:00

Here is the simplest of simplest examples I've used plenty.

HTML

<html>
<head>
   <script type="text/javascript">
   function onYourControlKeyDown(e){	
   // Arrows, backspace, tab, shift, control, end, home, delete
   if ((e.keyCode >= 37 && event.keyCode <= 40) || e.keyCode == 8 || e.keyCode == 9 ||
      e.keyCode == 16 || e.keyCode == 17 || e.keyCode == 35 || e.keyCode == 36 || e.keyCode == 46) {
      return true;
      }
   // Numbers are awesome...
   if ((e.keyCode >= 48 && e.keyCode <= 57 && e.shiftKey == false) ||
      (e.keyCode >= 96 && e.keyCode <= 105 && e.shiftKey == false)) {
      return true;
   }	
   e.preventDefault();
   return false;
   }
   </script>
</head>
<body>
   <input type='text' onkeydown='onYourControlKeyDown(window.event);' />
</body>
</html>

HOW to restrict the user to enter only numaric value

4 solutions

Solution 5

Solution 6

Solution 3

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us