Question

我有type=number输入字段，我为其设置了min和max值：

<input type="number" min="0" max="23" value="14">

当我使用输入字段右侧的小箭头更改渲染UI中的时间时，一切正常 - 我不能超过23或低于0.但是，当我手动输入数字时（使用键盘），这两个限制都没有效果。

有没有办法阻止任何人输入他们想要的任何数字？

Answer 1

也许不使用“数字”类型，您可以使用“范围”类型，这会限制用户输入数字，因为它使用滑动条，如果您想将其配置为显示当前数字，请使用JavaScript

Answer 2

使用HTML5 max和min，您只能将值限制为输入数字。但是你需要使用JavaScript或jQuery来做这种改变。我的一个想法是使用data-属性并保存旧值：

$(function () {
  $("input").keydown(function () {
    // Save old value.
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
    $(this).data("old", $(this).val());
  });
  $("input").keyup(function () {
    // Check correct, else revert back to old value.
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
      ;
    else
      $(this).val($(this).data("old"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" min="0" max="23" value="14" />

Answer 3

在某些情况下，可以使用pattern代替min和max。它与required一起正常工作。

Answer 4

一个event listener，没有data-属性。

您可以使用以下脚本简单地阻止它：

$(document).on('keyup', 'input[name=quantity]', function () {
    var _this = $(this);
    var min = parseInt(_this.attr('min')) || 1; // if min attribute is not defined, 1 is default
    var max = parseInt(_this.attr('max')) || 100; // if max attribute is not defined, 100 is default
    var val = parseInt(_this.val()) || (min - 1); // if input char is not a number the value will be (min - 1) so first condition will be true
    if(val < min)
        _this.val( min );
    if(val > max)
        _this.val( max );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" class="form-control" name="quantity" max="250" min="1" value="">

唯一的问题是：如果您的-小于0，则无法键入min来获取负数

Answer 5

$(document).ready(function(){
    $('input[type="number"]').on('keyup',function(){
        v = parseInt($(this).val());
        min = parseInt($(this).attr('min'));
        max = parseInt($(this).attr('max'));

        /*if (v < min){
            $(this).val(min);
        } else */if (v > max){
            $(this).val(max);
        }
    })
})

这是我的贡献。请注意，v <最小值已被注释掉，因为我使用的是Bootstrap，它会向用户指出范围不在1-100范围内，但不会突出显示>最大值！

Answer 6

尽管在type = number控件的向上/向下箭头上使用了min5和max的HTML5强制实施，但要真正使这些值有用，您仍然必须使用Javascript 。

只需将此函数保存在某个地方，然后在输入的键盘上调用它即可。

function enforceMinMax(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="0" max="23" value="14" onkeyup=enforceMinMax(this)>

Answer 7

使用此范围方法代替数字方法。

$(function () {
  $("#input").change(function () {
    // Save old value.
    $("#limit").val($("#input").val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="limit" name="limit" value="14" readonly><br>
<input type="range" id="input" name="input" min="0" max="23" value="14"/>

Answer 8

忘记按键或键盘输入：如果将最小值设置为10，它将不会让您输入15或20！使用更改事件，因为这是输入值进入业务逻辑（ViewModel）的位置：

private _enforceMinMax = (input:HTMLInputElement) => {
    console.log("input", input);
    const v = parseFloat(input.value);
    if(input.hasAttribute("min")) {
        const min = parseFloat(input.min);
        if(v < min) {
            input.value = min+"";
        }
    }
    if(input.hasAttribute("max")) {
        const max = parseFloat(input.max);
        if(v > max) {
            input.value = max+"";
        }
    }
}

private _distanceChange = (event) => {
    this._enforceMinMax(event.target);
    ...

Answer 9

当您在示例中使用通用类的通用功能文档EventListener“ keydown”时，此功能非常适合地理坐标。

<input type="text" name="X_pos" id="X_pos" class="form-control form-control-line" onkeydown="event.stopPropagation(); return(parseInt(event.key) >= 0 && parseInt(event.key) <= 9 && this.value+''+event.key <= 179 && this.value+''+event.key >= (-179)) || this.value.slice(-1) == '.' && parseInt(event.key) >= 0 && parseInt(event.key) <= 9 || event.keyCode == 8 || event.keyCode == 190 && String(this.value+''+event.key).match(/\./g).length <=1 || event.keyCode == 109 && String(this.value+''+event.key).length == 1 || event.keyCode == 189 && String(this.value+''+event.key).length == 1" style="width:100%;" placeholder="X" autocomplete="off">

如果需要，可以使用此代码创建一个函数，但我更喜欢此方法。

Answer 10

同样，没有解决方案能够真正解决我的问题。但是结合这些知识，它以某种方式起作用了

我想要的是一个真正的max / min验证器（支持int / float），无需花哨的html5帮助。

@Praveen Kumar Purushothaman的可接受答案有效，但在检查条件下其硬编码的最小值/最大值

@Vincent可以帮助我通过max / min属性动态地验证输入字段，但它不是通用的，只能验证整数输入。

结合两个答案下面的代码对我有用

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

$(function () {
    $("input").keydown(function () {
        enforceMinMax(this);
    });
    $("input").keyup(function () {
        enforceMinMax(this);
    });
});

对于DOM

<input type="number" min="0" max="1" step=".001" class="form-control">

此后，我的所有输入都真正响应了min max属性。

Answer 11

这对我有用我想你应该试试这个你根据你的需要改变模式就像你从模式 1 开始

<input type="number" pattern="[0-9]{2}" min="0" max="23" value="14">

Answer 12

oninput="if(this.value>your_max_number)this.value=your_max_number;"

这对我来说很合适。

Answer 13

$(function () {
  $("input").keydown(function () {
    // Save old value.
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
    $(this).data("old", $(this).val());
  });
  $("input").keyup(function () {
    // Check correct, else revert back to old value.
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
      ;
    else
      $(this).val($(this).data("old"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" min="0" max="23" value="14" />

Answer 14

如果您仍在寻找答案，可以使用输入类型=“数字” 如果按此顺序设置，则最大工作时间：
1名
2-的maxlength
3-尺寸
4分钟
5-MAX
只需复制它

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />

当您手动输入数字/字母（使用键盘）时，如果字母超出范围，请提交一个小信息“请输入数字”请选择一个值不多于/少于......“

HTML编号输入min和max无法正常工作

15 个答案: