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

对于<input type="number">元素， maxlength不起作用。 我怎样才能限制该数字元素的最大长度？

Answer 1

而且你可以添加一个max属性来指定你可能插入的最大可能的数字

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

如果同时添加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中截取的屏幕截图}

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

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

Answer 3

如果您正在寻找一种移动网络解决方案，希望用户看到数字键盘而不是全文键盘。 使用type =“tel”。 它将使用maxlength，从而节省您创建额外的JavaScript。

最大值和最小值仍然允许用户输入超过最大值和最小值的数字，这不是最优的。

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

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

Answer 8

你可以指定它为文本，但添加pettern，只匹配数字：

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

它工作完美，也在移动（在iOS 8和Android上测试）弹出数字键盘。

Answer 9

最大长度将不工作与<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" /> 

Answer 10

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

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

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

Answer 11

我以前有这个问题，我解决了它使用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 12

与type="number" ，您可以指定max而不是maxlength属性，这是可能的最大可能数字。 所以用4位数字， max应该是9999位数字99999等等。

另外如果你想确定它是一个正数，你可以设置min="0" ，确保正数。

Answer 13

您也可以尝试使用长度限制的数字输入

 <input type="tel" maxlength="3" /> 

Answer 14

正如其他人所说的，min / max与maxlength不同，因为人们仍然可以输入一个大于你想要的最大字符串长度的浮点数。 为了真正模拟maxlength属性，你可以在pinch中做这样的事情（这相当于maxlength =“16”）：

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

Answer 15

另一个选择是只添加一个侦听器，用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 16

更多相关属性使用将是min和max 。

Answer 17

我知道已经有了一个答案，但是如果你想让你的输入的行为与maxlength属性完全一样，或者尽可能的接近你的输入，可以使用下面的代码：

 (function($) { methods = { /* * addMax will take the applied element and add a javascript behavior * that will set the max length */ addMax: function() { // set variables var maxlAttr = $(this).attr("maxlength"), maxAttR = $(this).attr("max"), x = 0, max = ""; // If the element has maxlength apply the code. if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) { // create a max equivelant if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){ while (x < maxlAttr) { max += "9"; x++; } maxAttR = max; } // Permissible Keys that can be used while the input has reached maxlength var keys = [ 8, // backspace 9, // tab 13, // enter 46, // delete 37, 39, 38, 40 // arrow keys<^>v ] // Apply changes to element $(this) .attr("max", maxAttR) //add existing max or new max .keydown(function(event) { // restrict key press on length reached unless key being used is in keys array or there is highlighted text if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false; });; } }, /* * isTextSelected returns true if there is a selection on the page. * This is so that if the user selects text and then presses a number * it will behave as normal by replacing the selection with the value * of the key pressed. */ isTextSelected: function() { // set text variable text = ""; if (window.getSelection) { text = window.getSelection().toString(); } else if (document.selection && document.selection.type != "Control") { text = document.selection.createRange().text; } return (text.length > 0); } }; $.maxlengthNumber = function(){ // Get all number inputs that have maxlength methods.addMax.call($("input[type=number]")); } })($) // Apply it: $.maxlengthNumber(); 

Answer 18

正如我发现，你不能使用onkeydown ， onkeypress或onkeyup事件的任何一个完整的解决方案，包括移动浏览器。 顺便说一下， onkeypress已经被废弃了，并且不再出现在android的chrome / opera中（参见： UI Events W3C Working Draft，2016年8月4日 ）。

我只想出了一个使用oninput事件的解决方案。 您可能需要进行额外的数字检查，如正负号或小数点以及千位分隔符等，但作为开始，以下内容应该足够了：

 function checkMaxLength(event) { // Prepare to restore the previous value. if (this.oldValue === undefined) { this.oldValue = this.defaultValue; } if (this.value.length > this.maxLength) { // Set back to the previous value. this.value = oldVal; } else { // Store the previous value. this.oldValue = this.value; // Make additional checks for +/- or ./, etc. // Also consider to combine 'maxlength' // with 'min' and 'max' to prevent wrong submits. } } 

Answer 19

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; } });