jquery:在选项类型编号中设置最小最大输入

Question

我有这部分代码

<input type="number" min="2" max="10" step="2" id="contact" oninput="new_sum">

在该字段中,我可以插入数> 10且<2.

我怎么能限制它？

Answer 1

添加一个onchange函数并设置值,如果它超出范围.

 $(function () {
       $( "#numberBox" ).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);
          }       
        }); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberBox" type="number" min="2" max="10" step="2" id="contact"  />

Answer 2

一种更简单和动态的方式，不允许用户在区间之外键入或粘贴值或任何其他非数字字符（无需手动解析或检测键）：

$('input[type=number]').on('mouseup keyup', function () {
  $(this).val(Math.min(10, Math.max(2, $(this).val())));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="2" id="contact">

如果此特定事件仅用于特定输入，请使用id，即$('#contact').on(...)。 说明：这些数学函数Infinity在没有参数的情况下进行比较。

注意：mouseup也可用于防止用户粘贴或使用带有光标的箭头。

Answer 3

我在这里使用的方法（尽管我已经创建了一个插件来这样做）是检查输入的值是否在min和max属性定义的范围内，如果是，我们保留该值；如果不是，我们测试输入的值是否小于该min值，如果是，则将值设置为该min值，如果不是（暗示该值必须大于max），我们将值设置为该max属性：

(function ($) {
    $.fn.restrict = function () {
        // returns the collection returned by the selector, over which we iterate:
        return this.each(function(){
            // binding a change event-handler:
            $(this).on('change', function(){
                // caching the 'this' (the current 'input'):
                var _self = this,
                    // creating numbers from the entered-value,
                    // the min and the max:
                    v = parseFloat(_self.value),
                    min = parseFloat(_self.min),
                    max = parseFloat(_self.max);
                // if it's in the range we leave the value alone (or set
                // it back to the entered value):
                if (v >= min && v <= max){
                    _self.value = v;
                }
                else {
                    // otherwise we test to see if it's less than the min,
                    // if it is we reset the value to the min, otherwise we reset
                    // to the max:
                    _self.value = v < min ? min : max;
                }
            });
        });
    };
})(jQuery);

$('#contact').restrict();

JS小提琴演示。

这有点天真，因为restrict()插件不测试<input>元素的类型是否为number(yet)。

编辑添加了一个轻微的健全性检查，以检查该元素实际上是type="number"：

(function ($) {
    $.fn.restrict = function () {
        return this.each(function(){
            if (this.type && 'number' === this.type.toLowerCase()) {
                $(this).on('change', function(){
                    var _self = this,
                        v = parseFloat(_self.value),
                        min = parseFloat(_self.min),
                        max = parseFloat(_self.max);
                    if (v >= min && v <= max){
                        _self.value = v;
                    }
                    else {
                        _self.value = v < min ? min : max;
                    }
                });
            }
        });
    };
})(jQuery);

JS小提琴演示。