Атрибут 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 будет работать.