Атрибут HTML maxlength не работает на хроме и сафари?
<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius">
Это мой HTML, взятый с firebug (на хроме).
Мне разрешено писать столько же символов, сколько и в поле формы - в Chrome и Safari.
Когда в Firefox или IE10, предел прекрасен.
Я не нашел эту проблему в сети.
Примечание: type = "number" - не текст.
Кто-нибудь видел эту проблему раньше?
Ответы
Ответ 1
Используйте атрибут max для входов type="number"
. Он укажет максимально возможное число, которое вы можете вставить
<input type="number" max="999" />
если вы добавите значение max и min, вы можете указать диапазон допустимых значений:
<input type="number" min="1" max="999" />
См. этот пример
ИЗМЕНИТЬ
Если для пользовательского опыта вы предпочитаете, чтобы пользователь не мог ввести более определенного номера, используйте Javascript/jQuery, как показано в примере
Ответ 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"
/>
Ответ 3
Атрибут maxlength не применяется к вводу типа = "number"
Из спецификации W3 HTML5 относительно type = "number"
Следующие атрибуты контента не должны указываться и не должны применить к элементу: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, высота, maxlength, multiple, pattern, size, src и width.
Источник: http://dev.w3.org/html5/spec/Overview.html#number-state-type-number
(в разделе "Сведения о бухгалтерии" )
В FF и IE вход возвращается для ввода текста, и поэтому к входу применяется maxlength. Когда FF и IE реализуют type = "number" , они также должны реализовать его таким образом, чтобы maxlength не применялся.
Ответ 4
Для тех, кто до сих пор не может заставить его работать... Попробуйте это, чтобы запустить более толстые колодки:
<input type="number" name="no1" maxlength="1" size="1" max="9" pattern="[0-9]*" />
И js:
$('input[name="no1"]').keypress(function() {
if (this.value.length >= 1) {
return false;
}
});
Ответ 5
Вот пример использования type="number"
и maxlength
, который работает с Chrome, IE и другими. Надеюсь, это поможет!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function test(id, event) {
var element = $("#" + id);
var len = element.val().length + 1;
var max = element.attr("maxlength");
var cond = (46 < event.which && event.which < 58) || (46 < event.keyCode && event.keyCode < 58);
if (!(cond && len <= max)) {
event.preventDefault();
return false;
}
}
</script>
</head>
<body>
<input id="test" size="3" type="number" maxlength="3" onkeypress="test(this.id, event)">
</body>
</html>
Ответ 6
Говоря о HTML 4.01, такого типа, как "число", нет.
Говоря о HTML 5 FF и IE, еще не знаете тип номера, если http://www.w3schools.com/html5/html5_form_input_types.asp является правильным.
/edit: Таким образом, FF и IE, вероятно, вернутся к тексту, и именно поэтому maxlength будет работать.