How Do I Lock The Keyboard And Only Allow Numbers To Be Input Into An Editorfor/Textbox In Mvc5?

Question

0.00/5 (No votes)

See more:

i have a problem with the code for locking the keyboard and only allowing numeric values to be input
i have been trying the following code in the view

@Html.LabelFor(model => model.contactNo, new { @class = "control-label col-md-2" })

@Html.TextBoxFor(model => model.contactNo, new { @maxlength = "10", onkeypress = "return isNumberKey(event)" })

@Html.ValidationMessageFor(model => model.contactNo)

XML

<script type="text/javascript">

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

        return true;
    }
</script>

but it doesn't work. it still allows the user to write letters and validate later

Posted 23-May-14 0:33am

Member 10816271

Add a Solution

2 solutions

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)

nocturns2 · Answer 1 · 2014-05-23T04:07:00

In mvc you can use data annotations in your data model to control the content that gets entered.
You place the annotations above the field property.
You can use regular express annotation to enforce numbers only ( i.e., [RegularExpression(@"^[0-9]*$")] ), this should not allow anything else to be entered in that field other than numeric digits.
You can also use the range annotation to set the range of values, ( i.e., [Range(1, 10)] ).

You should check out regular expressions.

You also have html helpers to show validation messages for the input ( i.e., textbox ).

In your javascript, you should be able to just check if(charCode >= 48 && charCode <= 57),
this adds the contraints to keep it between 0 and 9, you can see the difference between using AND and OR.
You can also use regular expressions in javascript.

Finally, check the syntax for proper use of quotes on parameters.

W∴ Balboos, *GHB* · Answer 2 · 2014-05-23T04:49:00

In some versions of CSS3, you can create an INPUT item that only allows numbers - but not all browser will support this.

An always-works method would be to create an onchange event for the input box. Then, whenever a character is entered (or removed), you handler for the onchange event will go through the element's value and discard any non-numeric values. [Some methods for doing this were suggested in solution 1].

Then, use the result to update the input box's value;

How Do I Lock The Keyboard And Only Allow Numbers To Be Input Into An Editorfor/Textbox In Mvc5?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0