Question

我有这部分代码

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

在该字段中，我可以插入一个数字＆gt; 10和＆lt; 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

我在这里使用的方法（尽管我创建了一个插件）是检查输入的值是否在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 Fiddle demo

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

已修改以添加轻微的健全性检查以检查该元素实际上是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 Fiddle demo

Answer 3

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

$('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(...)。解释：在没有参数的情况下，这些Math functions与Infinity进行比较。

注意：mouseup也可用于阻止用户粘贴光标或使用光标。

Answer 4

jquery set min max input（all type）

设置属性min＆amp;标签输入中的属性max

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<input type="tel" class="form-control text-right ltr" data-min_max data-min="0" data-max="100" data-toggle="just_number" />

你可以改变min＆amp;最大

data-min =“0”data-max =“100”

Jquery的

$(document).on('keyup', '[data-min_max]', function(e){
    var min = parseInt($(this).data('min'));
    var max = parseInt($(this).data('max'));
    var val = parseInt($(this).val());
    if(val > max)
    {
        $(this).val(max);
        return false;
    }
    else if(val < min)
    {
        $(this).val(min);
        return false;
    }
});

$(document).on('keydown', '[data-toggle=just_number]', function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
         // Allow: Ctrl+C
        (e.keyCode == 67 && e.ctrlKey === true) ||
         // Allow: Ctrl+X
        (e.keyCode == 88 && e.ctrlKey === true) ||
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

示例：jsfiddle

Answer 5

您可以在任何输入步骤元素上使用通用函数 -

 $(function () {

    var limitInput = function () {
        var value = parseInt(this.value, 10);
        var max = parseInt(this.max, 10);
        var min = parseInt(this.min, 10);

        if (value > max) {
            this.value = max;
        } else if (value < min) {
            this.value = min
        }
    };

    $("#numberBox").change(limitInput);
});

FIDDLE

Answer 6

你可以用jquery编写：

$('#contact').prop('minLength', 2);
$('#contact').prop('maxLength', 10);

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

6 个答案: