输入文本仅接受 1-10 的数字 [重复]

Question

我有一个输入文本，我想将值设置为仅从 1 到 10 的数字，仅当用户键入的值大于文本框时会将其更改为 10，或者当小于 0 时文本将更改为0.并且文本框也不会接受除数字之外的其他值我为此使用了下面的代码，但它不工作它甚至接受字母，无论我输入什么值它都接受我在这个输入中缺少的值文本。是不是只需要js来解决这种问题？

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

Answer 1

使用min=1 和max=10 仅在用户使用箭头输入时有效，而不是在他/她在输入框中书写时有效。所以你可以将此脚本与min and max结合使用

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

脚本

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

Answer 2

如果您想禁止用户输入除数字以外的任何内容，您必须使用 JS 或 jQuery。

尝试以下方法：

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/