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/

输入文本只接受1-10的数字

2 个答案: