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

本文翻译自：How can I limit possible inputs in a HTML5 “number” element?

For <input type="number"> element, maxlength is not working. 对于<input type="number">元素， maxlength不起作用。 How can I restrict the maxlength for that number element? 我怎样才能限制的maxlength为号元素？

---

#1楼

参考：https://stackoom.com/question/Z3Vf/如何限制HTML-数字-元素中的可能输入

---

#2楼

You can combine all of these like this: 您可以像这样组合所有这些：

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

Update: 更新：
You might also want to prevent any non-numeric characters to be entered, because object.length would be an empty string for the number inputs, and therefore its length would be 0 . 您可能还想阻止输入任何非数字字符，因为object.length对于数字输入将是一个空字符串，因此其长度将为0 。 Thus the maxLengthCheck function won't work. 因此， maxLengthCheck函数将不起作用。

Solution: 解：
See this or this for examples. 请参见本或本的例子。

Demo - See the full version of the code here: 演示 -在此处查看代码的完整版本：
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/ http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Update 2: Here's the update code: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/ 更新2：这是更新代码： https : //jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Update 3: Please note that allowing more than a decimal point to be entered can mess up with the numeral value. 更新3：请注意，允许输入的小数点以上可能会弄乱数字值。

---

#3楼

If you are looking for a Mobile Web solution in which you wish your user to see a number pad rather than a full text keyboard. 如果要在Mobile Web解决方案中希望用户看到数字键盘，而不是全文键盘。 Use type="tel". 使用type =“ tel”。 It will work with maxlength which saves you from creating extra javascript. 它将与maxlength一起使用，可避免创建额外的javascript。

Max and Min will still allow the user to Type in numbers in excess of max and min, which is not optimal. 最大值和最小值仍将允许用户输入超出最大值和最小值的数字，这不是最佳选择。

---

#4楼

it's very simple, with some javascript you can simulate a maxlength , check it out: 这非常简单，您可以使用一些JavaScript来模拟maxlength ，并进行检查：

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

---

#5楼

Maycow Moura's answer was a good start. Maycow Moura的答案是一个好的开始。 However, his solution means that when you enter the second digit all editing of the field stops. 但是，他的解决方案意味着，当您输入第二位数字时，将停止对该字段的所有编辑。 So you cannot change values or delete any characters. 因此，您不能更改值或删除任何字符。

The following code stops at 2, but allows editing to continue; 以下代码在2处停止，但允许继续编辑；

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

---

#6楼

Or if your max value is for example 99 and minimum 0, you can add this to input element (your value will be rewrited by your max value etc.) 或者，如果您的最大值是例如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">

Then (if you want), you could check if is input really number 然后（如果需要），您可以检查输入的是否为真的数字