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

Question

我有type=number输入字段,我为它设置min和max值:

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

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

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

Answer 1

尽管 HTML5 在 type=number 控件的向上/向下箭头上强制执行 min 和 max，但要真正使这些值有用，您仍然必须使用 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 2

也许不使用"数字"类型,您可以使用"范围"类型,这将限制用户输入数字,因为它使用滑动条,如果您想配置它以显示当前数字只需使用JavaScript

Answer 3

<input type="number" min="0" onkeyup="if(value<0) value=0;" />

Answer 4

使用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 5

在某些情况下pattern可以用来代替min和max.它正常工作required.

Answer 6

$(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 < min 被注释掉了，因为我使用的是 Bootstrap，它善意地向用户指出范围在 1-100 之外，但奇怪的是没有突出显示 > max！

Answer 7

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

这对我来说很有效。