如何限制 HTML5 「number」元素中的可能输入？

问题描述

对于<input type="number"> 元素，maxlength 不起作用。如何限制该数字元素的 maxlength？

最佳解决方案

并且您可以添加一个 max 属性，该属性将指定可插入的最高可能的数字

<input type="number" max="999" />

如果同时添加了 max 和 min 值，则可以指定允许值的范围：

<input type="number" min="1" max="999" />

以上内容仍然不能阻止用户手动输入超出指定范围的值。相反，他会在提交表单时显示一个弹出窗口，告诉他在此范围内输入一个值，如屏幕截图所示：

次佳解决方案

您可以指定 min 和 max 属性，这将只允许在特定范围内进行输入。

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

但这只适用于微调控制按钮。虽然用户可能能够输入比允许的 max 大的数字，但表单将不会提交。

从 Chrome 15 截图

您可以在 JavaScript 中使用 HTML5 oninput 事件来限制字符数：

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

第三种解决方案

如果您正在寻找一种移动 Web 解决方案，您希望用户可以在其中查看数字键盘而不是全文键盘。使用 type = “tel” 。它将与 maxlength 一起工作，可以节省您创建额外的 JavaScript 。

Max 和 Min 仍然允许用户输入超过 max 和 min 的数字，这不是最佳的。

第四种方案

你可以结合所有这些：

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>

更新：您可能还想防止输入任何 non-numeric 字符，因为 object.length 将是数字输入的空字符串，因此其长度将为 0 。因此 maxLengthCheck 功能将无法正常工作。

解决方法：参见 this 或 this 例子。

演示 – 请参阅代码的完整版本：http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

更新 2：这是更新代码：https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

更新 3：请注意，输入超过小数点可能会弄乱数字值。

第五种方案

这很简单，有些 javascript 可以模拟一个 maxlength，看看：

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

第六种方案

或者如果您的最大值为 99，最小值为 0，则可以将其添加到输入元素 (您的值将被最大值重写等)

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

然后 (如果你想要的话)，你可以检查输入是否真的是数字

第七种方案

您可以将其指定为文本，但添加仅与匹配数字的 pettern：

<input type="text" pattern="d*" maxlength="2">

它的工作原理完美，还可以在手机上 (在 iOS 8 和 Android 上测试) 弹出数字键盘。

第八种方案

最大长度不能与<input type="number"一起工作，我知道是使用 oninput 事件来限制最大长度。请参阅以下代码以进行简单的实现。

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

第九种方案

Maycow Moura 的回答是一个好的开始。但是，他的解决方案意味着当您输入第二个数字时，所有的字段编辑都会停止。所以你不能更改值或删除任何字符。

以下代码停止在 2，但允许编辑继续;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

第十种方案

我以前有这个问题，我使用 html5 数字类型和 jQuery 的组合来解决它。

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

脚本：

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

我不知道事件是否有点过分，但是它解决了我的问题。 JSfiddle

参考文献

How can I limit possible inputs in a HTML5 「number」 element?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何限制 HTML5 「number」元素中的可能输入？