如何限制HTML5"数字"元素中的可能输入？

Question

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

Answer 1

您可以添加一个max属性,该属性将指定您可以插入的最高编号

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

如果同时添加a max和min值,则可以指定允许值的范围:

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

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

Answer 2

您可以指定min和max属性,这将允许仅在特定范围内输入.

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

但是,这仅适用于微调器控制按钮.虽然用户可能能够键入大于允许的数字max,但表单不会提交.

^{截图取自Chrome 15}

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

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

Answer 3

如果您正在寻找一种移动Web解决方案,您希望用户在其中查看数字键盘而不是全文键盘.使用type ="tel".它将与maxlength一起使用,这将使您免于创建额外的JavaScript.

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

Answer 4

你可以将所有这些结合起来:

<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>

更新:
您可能还希望阻止输入任何非数字字符,因为object.length数字输入的字符串为空,因此其长度为0.因此该maxLengthCheck功能不起作用.

解决方案:
请参阅此或此示例.

演示 - 请在此处查看完整版代码:http:
//jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

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

更新3: 请注意,允许输入超过一个小数点可能会弄乱数字值.

Answer 5

这很简单,你可以用一些javascript模拟一个maxlength,看一下:

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

Answer 6

或者,如果您的最大值是例如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">

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

Answer 7

您可以将其指定为文本,但添加pettern,仅匹配数字:

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

它非常完美,并且在移动设备上(在iOS 8和Android上测试)弹出数字键盘.

Answer 8

假设您希望最大允许值为 1000 - 键入或使用微调器。

您可以使用以下方法限制微调器值： type="number" min="0" max="1000"

并使用 javascript 限制键盘输入的内容： onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

Answer 9

简单的解决方案将起作用，

• 输入滚动事件

• 通过键盘复制粘贴

• 通过鼠标复制粘贴

• 输入类型等情况

  <input id="maxLengthCheck" 
         name="maxLengthCheck" 
         type="number" 
         step="1" 
         min="0" 
         oninput="this.value = this.value > 5 ? 5 : Math.abs(this.value)" />
  

查看this.value > 5的条件，只需将 5 更新为您的最大限制。

解释：

• 如果我们的输入数字大于我们的限制，则用适当的数字Math.abs(this.value)更新输入值this.value

• 否则只需达到最大限制，即 5。

Answer 10

//For Angular I have attached following snippet.

<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
  </form>
  <h1>You entered: {{number}}</h1>
</div>

如果您使用"onkeypress"事件,那么在开发过程中您将不会受到任何用户限制(单元测试).如果您有要求不允许用户在特定限制后输入,请查看此代码并尝试一次.

Answer 11

另一种选择是只为具有maxlength属性的任何内容添加一个侦听器,并将切片值添加到该值.假设用户不想在与输入相关的每个事件中使用函数.这是一段代码片段.忽略CSS和HTML代码,JavaScript才是最重要的.

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);

label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }

<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>

Answer 12

正如其他人所说,min/max与maxlength不同,因为人们仍然可以输入一个大于你想要的最大字符串长度的浮点数.要真正模拟maxlength属性,您可以在压缩中执行类似的操作(这相当于maxlength ="16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

Answer 13

最大长度将无法使用<input type="number"我知道的最佳方式使用oninput事件来限制maxlength.请参阅以下代码以简单实现.

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

Answer 14

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

这对我来说没有问题

Answer 15

Maycow Moura的回答是个好的开始.但是,他的解决方案意味着当您输入第二个数字时,所有字段的编辑都会停止.因此,您无法更改值或删除任何字符.

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

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

Answer 16

之前我遇到过这个问题,我使用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

Answer 17

为数字输入设置 maxlength 的一种简单方法是：

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

Answer 18

HTML 输入

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });

Answer 19

啊。就好像有人在实施过程中半途而废，并认为没有人会注意到。

无论出于何种原因，上面的答案都没有使用min和max属性。这个 jQuery 完成了它：

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

如果您是那些“jQuery-is-the-devil”类型之一，它可能也可以作为没有 jQuery 的命名函数“oninput”。