input text only accepts number from 1- 10

Question

i have an input text where i want to set value to only number from 1 - 10 only when the user types a value that is more than the text box will change it to 10 or when less than 0 the text will change to 0.and the text box will also not accept other values than number i used the code below for this but its not working it even accepts letters and no matter how what value i put in it it accepts the value what am i missing in this input text. is there a need of js just for this kind of problem?

<input type="number" min="0" max="10"/>

Hi, please always remember to Google first. `input text only accepts number html` will give a huge list of other Stack Overflow questions on the same issue — Pekka, Nov 29 '13 at 03:35
@Pekka웃 i did tried them all but it didnt worked for me thanks for minus anyway — , Nov 29 '13 at 03:38
That's hard to believe - there are perfectly workable solutions there. (And that wasn't my downvote.) — Pekka, Nov 29 '13 at 03:55
i was asking if you can do it with out js all others uses js i asked here and i believe no wants to answer me they just want to put an - on me lol even the answer below got -1 lol — , Nov 29 '13 at 03:57
The question I pointed to shows a solution that doesn't need Javascript. — Pekka, Nov 29 '13 at 04:00
sorry i cant understand what you mean but thank any for having this conversation i appreciate it — , Nov 29 '13 at 04:02
The link above has an answer that uses HTML 5 and the "pattern" attribute — Pekka, Nov 29 '13 at 04:39
@Pekka웃 not all mobile phone browsers accept `pattern` attribute http://www.quirksmode.org/html5/inputs_mobile.html#t12 — Omar, Nov 29 '13 at 12:46

score 2 · Accepted Answer · answered Nov 29 '13 at 04:38

using min=1 and max=10 will work only when user gives input using arrows not when he/she writes in the input box. So you can use this script in combination with min and max

<input type="number" value="1" min="1" max="10">

script

var t = false

$('input').focus(function () {
var $this = $(this)

t = setInterval(

function () {
    if (($this.val() < 1 || $this.val() > 10) && $this.val().length != 0) {
        if ($this.val() < 1) {
            $this.val(1)
        }

        if ($this.val() > 10) {
            $this.val(10)
        }

    }
}, 50)
})

$('input').blur(function () {
    if (t != false) {
    window.clearInterval(t)
    t = false;
    }
})

DEMO

Orlo · Answer 2 · 2013-11-29T04:31:09.880

You have to use JS or jQuery, if you want to disable user from typing anything but numbers.

try the following:

Only numbers please: 
<input type="number" min="1" max="10" id="someid" onkeypress="return isNumberKey(event)" /> 

<script>
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var num = document.getElementById('someid').value;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) || (num > 10)){
        if (num > 10){
          alert('choose number from 1-10');    
        }
        return false;
    }else{
        return true;
    }
}   
</script>

http://jsfiddle.net/3F5rd/1/

the number thing is ok but it still doesnt solve my problem i only want user to enter value from 0 - 10 but it works ok 1 up from me bro — , Nov 29 '13 at 03:55

input text only accepts number from 1- 10

2 Answers2