maxlength игнорируется для типа ввода = «число» в Chrome

Из документации MDN для

Если значением атрибута type является text , email , search , password , tel или url , этот атрибут определяет максимальное количество символов (в кодовых точках Unicode), которые пользователь может ввести; для других типов управления он игнорируется.

Таким образом, maxlength игнорируется по по дизайну.

В зависимости от ваших потребностей вы можете использовать атрибуты min и max как указано в его / ее ответе (NB: это будет определять только ограниченный диапазон, а не фактическую длину символа значения, хотя от -9999 до 9999 будет охватывать все 0 -4-разрядные номера), или вы можете использовать обычный ввод текста и принудительно выполнять проверку в поле с новым атрибутом pattern :

Максимальная длина не будет работать с лучший способ, который я знаю, - использовать oninput событие для ограничения максимальной длины. См. Приведенный ниже код.

Вы можете использовать атрибуты min и max .

Следующий код делает то же самое:

У меня есть два способа сделать это:

Во-первых: Используйте type="tel" , он будет работать как type="number" в мобильном телефоне и принимает maxlength:

Второе: используйте немного JavaScript:

Я однажды попал в ту же проблему и нашел это решение в отношении моих потребностей. Это может помочь кому-то.

Счастливое кодирование 🙂

Вы можете попробовать это также для числового ввода с ограничением длины

Многие ребята отправили onKeyDown() событие, которое не работает вообще, вы не можете удалить, как только достигнете предела. Поэтому вместо onKeyDown() использовать onKeyPress() и он отлично работает. Ниже приведен рабочий код:

 User will not be allowed to enter more than 4 digits 
  

Вот мое решение с jQuery … Вы должны добавить maxlength к вашему типу ввода = номер

 $('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){ event.preventDefault(); return false; } // pressed key have to be a number if( !regex.test(charcodestring) ){ event.preventDefault(); 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); }); 

Надеюсь, это поможет кому-то.

Я знаю, что есть ответ уже, но если вы хотите, чтобы ваш ввод вел себя точно так же, как атрибут 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(); 

В моем опыте большинство проблем, когда люди спрашивают, почему maxlength игнорируется, заключается в том, что пользователю разрешено вводить больше, чем «разрешенное» количество символов.

Как указывали другие комментарии, входы type="number" не имеют атрибута maxlength и вместо этого имеют атрибут min и max .

Чтобы поле ограничивало количество символов, которые можно вставить, позволяя пользователю знать об этом до отправки формы (браузер должен определить значение> max в противном случае), вам придется (на данный момент, по крайней мере) добавить слушателя в поле.

Вот решение, которое я использовал в прошлом: http://codepen.io/wuori/pen/LNyYBM

Измените тип ввода на текст и используйте функцию «oninput» для вызова:

Теперь используйте Javascript Regex, чтобы фильтровать ввод пользователя и ограничивать его только номерами:

 function numberOnly(id) { // Get element by id which passed as parameter within HTML element event var element = document.getElementById(id); // User numbers only pattern, from 0 to 9 var regex = /[^0-9]/gi; // This removes any other character but numbers as entered by user element.value = element.value.replace(regex, ""); } 

Демо: https://codepen.io/aslami/pen/GdPvRY

Chrome (технически, Blink) не будет использовать maxlength для .

Спецификация HTML5 говорит, что maxlength применим только к типам текста, url, e-mail, search, tel и password.

DEMO – JSFIDDLE

maxlenght – текст типа ввода

используя jQuery:

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

maxlenght – номер типа ввода

JS

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

HTML