CODEWITHSUNDEEP
javascripthtmlnumbers
user79307
user79307

Reputation: 507

Don't allow typing alphabetic characters in a <input type=number />

I need to have a textbox, where, whenever typed inside should ONLY allow numbers [0-9]. I've used type="number" which definitely holds the client side validation but also allows to type other alphabets. I can do it by tracking each keydown and matching with regex but I was wondering if there is any way I can restrict to type using only html tags and NOT defining any functions in JavaScript to compare in each keydown?

Code not sufficient to do so is:

    <input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">

Any help is appreciated.

Upvotes: 22

Views: 120484

Answers (9)

Ankush
Ankush

Reputation: 1

just add - min="0" max="9" onkeydown="return false;"

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" min="0" max="9" onkeydown="return false;">

Upvotes: 0

Monika Tiruchanur
Monika Tiruchanur

Reputation: 21

I notice that the question was posted around 2013. Anyways, now type="number" is restricting alphabets and special characters other that 'e','.' and '+' as 'e' and '.' are considered for exponential numbers like 1.2e+12, '.' is considered for decimal numbers.

Upvotes: 1

user7409534
user7409534

Reputation: 11

Try this:-

 $("#txtAge").keydown(function (e) {
       if(e.key=='e' || e.key=='.' || e.key=='-')
        return false;
    });

Upvotes: 1

Sandip
Sandip

Reputation: 374

Try this

define javascript function

function for allowed number with decimal as below

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

    return true;
}

function for allowed only number not decimal is as below 

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

    return true;
}

Html

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" onkeypress="return isNumberKey(event)">

Upvotes: 17

mswyss
mswyss

Reputation: 332

input type="number" for getting Numeric Keyboard on Mobile Device

Java-Script

function numbersonly(myfield, e)
        {
            var key;
            var keychar;

            if (window.event)
                key = window.event.keyCode;
            else if (e)
                key = e.which;
            else
                return true;

            keychar = String.fromCharCode(key);

            // control keys
            if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
                return true;

            // numbers
            else if ((("0123456789").indexOf(keychar) > -1))
                return true;

            // only one decimal point
            else if ((keychar == "."))
            {
                if (myfield.value.indexOf(keychar) > -1)
                    return false;
            }
            else
                return false;
        }

Html

<input type="number" onkeypress="return numbersonly(this, event)"/>

Upvotes: 3

ds345
ds345

Reputation: 737

You will have to have your input box inside a form and with a submit button. The form validation happens at the submission of the form. See a demo here: http://jsfiddle.net/ds345/Q4muA/1/

<form>Number:
    <input type="number" name="Number" value="10">
    <br>
    <input type="submit" value="Submit" />
</form>

Upvotes: 1

Akhil Sekharan
Akhil Sekharan

Reputation: 12693

If you don't mind using a bit of Javascript, this might help JS-BIN Demo:

<input type="number" onkeyup="if(!this.checkValidity()){this.value='';alert('Please enter a number')};"/>

Upvotes: 1

Greg Neils
Greg Neils

Reputation: 19

Browsers behave differently. In Chrome the following code:

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">
  <input type="submit">

will work for you only if it is in a form and only after the user clicks the submit button.

Upvotes: 1

mihai.ciorobea
mihai.ciorobea

Reputation: 741

You can use jquery.numeric plugin.

See here similar question.

$(document).ready(function(){
   $(".numeric").numeric();
});

Upvotes: 23

Related Questions