如果超出范围，则将输入类型="number" 限制为其最小值或最大值

Question

我有以下代码

<form:input type="number" min="1" max="4" size="5" value="1" path="n" name='n' placeholder="<5" style="height:25px;width:60px"></form:input>

如果用户在文本框中输入的值超出范围，那么它应该重置为最接近的最小值或最大值，例如，如果用户在文本框中输入的值小于 1，那么它应该重置为 1，如果他输入超过 4 那么它应该重置为 4.

如果我们有其他标签代替input标签来限制，请指教

已经有一个解决方案不适合我

Answer 1

这个解决方案可能就是您想要的：jquery: set min max input in option type number

$(function () {
    $( "input" ).change(function() {
        var max = parseInt($(this).attr('max'));
        var min = parseInt($(this).attr('min'));
        if ($(this).val() > max)
        {
            $(this).val(max);
        }
        else if ($(this).val() < min)
        {
            $(this).val(min);
        } 
    });      
});

@Caspian 还提供了一个有效的 fiddle：http://jsfiddle.net/Ddk67/75/

Answer 2

实际上，如果输入的数字不在范围内，input type=number 只会处理，不允许用户提交表单

Answer 3

如果 HTML5 确实阻止了值的输入，那就太好了，因为仅阻止值被提交，并不能满足所有用例。

在这种情况下，我会在 keyup 上调用以下函数。

function imposeMinMax(el){
  if(el.value != ""){
    if(parseInt(el.value) < parseInt(el.min)){
      el.value = el.min;
    }
    if(parseInt(el.value) > parseInt(el.max)){
      el.value = el.max;
    }
  }
}

使用示例

<input type=number min=1 max=4 onkeyup=imposeMinMax(this)>

如果用户输入较大的值，这会将值重置为最大值，如果用户输入较小的值，则会将其重置为最小值。

如果超出范围，则将输入类型="number" 限制为其最小值或最大值

Restrict input type="number" to its min or max if it is out of range

html

numbers

input

restrict