在Chrome中inputtypes=“数字”时忽略maxlength

maxlength属性不适用于<input type="number"> 。 这只在Chrome中发生。

 <input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/> 

Answer 1

从MDN的<input>文档

如果type属性的值是text ， email ， search ， password ， tel或url ，那么这个属性指定用户可以input的最大字符数（用Unicode代码点） 对于其他控制types，它被忽略。

所以maxlength在devise上被忽略了<input type="number"> 。

根据您的需要，您可以使用他/她的回答中build议的min和max属性（注意：这只会定义一个约束范围，而不是数值的实际字符长度，但-9999到9999将覆盖全部0 -4位数字），也可以使用常规文本input并使用新的pattern属性对字段执行validation：

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

Answer 2

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

您可以使用最小和最大属性。

以下代码也是这样做的：

 <input type="number" min="-999" max="9999"/> 

Answer 4

我有两种方法可以做到这一点

首先：使用type="tel" ，它将在移动设备上类似于type="number" ，并接受maxlength：

 <input type="tel" /> 

第二：使用一点JavaScript：

 <!-- maxlength="2" --> <input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" /> 

Answer 5

这里是我用jQuery的解决scheme…你必须添加maxlength到你的inputtypes=数字

 $('body').on('keypress', 'input[type=number][maxlength]', function(event){ var key = event.keyCode || event.charCode; var charcodestring = String.fromCharCode(event.which); var txtVal = $(this).val(); var maxlength = $(this).attr('maxlength'); var regex = new RegExp('^[0-9]+$'); // 8 = backspace 46 = Del 13 = Enter 39 = Left 37 = right Tab = 9 if( key == 8 || key == 46 || key == 13 || key == 37 || key == 39 || key == 9 ){ return true; } // maxlength allready reached if(txtVal.length==maxlength){ return false; } // pressed key have to be a number if( !regex.test(charcodestring) ){ return false; } return true; }); 

并处理复制和粘贴：

 $('body').on('paste', 'input[type=number][maxlength]', function(event) { //catch copy and paste var ref = $(this); var regex = new RegExp('^[0-9]+$'); var maxlength = ref.attr('maxlength'); var clipboardData = event.originalEvent.clipboardData.getData('text'); var txtVal = ref.val();//current value var filteredString = ''; var combined_input = txtVal + clipboardData;//dont forget old data for (var i = 0; i < combined_input.length; i++) { if( filteredString.length < maxlength ){ if( regex.test(combined_input[i]) ){ filteredString += combined_input[i]; } } } setTimeout(function(){ ref.val('').val(filteredString) },100); }); 

我希望它能帮助别人。

Answer 6

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

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

Answer 7

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

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

在我的经验中，大多数人问为什么maxlength被忽略的问题是因为允许用户input超过“允许的”字符数。

正如其他评论所述， type="number"input没有maxlength属性，而是具有min和max属性。

为了使字段限制可以插入的字符数，同时允许用户在提交表单之前知道这个字符（否则浏览器应该确定value> max否则），您将不得不（现在至less）添加一个倾听领域。

这是我过去使用的解决scheme： http : //codepen.io/wuori/pen/LNyYBM

Answer 9

它将允许从0到9999之间的任何数字，仅此而已，不是字母而不是特殊字符。

Answer 10

我曾经遇到同样的问题，并根据我的需求find了解决scheme。 这可能有助于某个人。

 <input type="number" placeholder="Enter 4 Digits" max="9999" min="0" onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;" /> 

快乐编码:)

Answer 11

Chrome（技术上，Blink） 将不会为<input type="number"> 实现maxlength 。

HTML5规范说maxlength只适用于文本，url，电子邮件，search，电话和密码的types。

Answer 12

maxlenght – input文字

 <input type="email" name="email" maxlength="50"> 

使用jQuery：

 $("input").attr("maxlength", 50) 

maxlenght – inputtypes编号

JS

 function limit(element, max) { var max_chars = max; if(element.value.length > max_chars) { element.value = element.value.substr(0, max_chars); } } 

HTML

 <input type="number" name="telefono" onkeydown="limit(this, 20);" onkeyup="limit(this, 20);">