HTML5 Тип ввода "число" в Firefox

Я работаю над приложением, которое используется только несколькими людьми в доме, поэтому я чувствую себя комфортно, говоря им, что они используют только Firefox или Chrome, поэтому я могу использовать HTML5.

Я работал над очень простой функцией:

<style> 
input:invalid { background-color: red; }
div.box {
border-color:#000; 
border-width:thin; 
border-style:solid;
}
</style>     
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small>

Он отлично работает в Chrome: он становится красным и не позволит вам подавать, без меня что-то кодировать.

Firefox... не так много. Он действует так, как будто у меня есть "текстовый" тип.

Это известная проблема? Обходной путь?

Спасибо

Ответ 1

Во-первых, используете ли вы Firefox 4? Форма HTML5 имеет гораздо лучшую поддержку в версии 4.

Эта страница содержит подробную информацию о форматах HTML5 и текущих ошибках https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

Обновление. Если браузер не поддерживает функции HTML5, которые вы хотите использовать, попробуйте Modernizr. Он использует Javascript для улучшения поддержки. В документации есть информация о типах ввода.

Ответ 2

Это известная проблема?

Да. Неизвестные типы рассматриваются как текст. (И типы, которые появляются только в черновиках, как правило, неизвестны многими браузерами)

Обходной путь?

JavaScript

Ответ 3

input type="number" в Firefox еще не реализован с версии 25 (ноябрь 2013 г.).

Ошибка 344616 - это соответствующий билет в Bugzilla @Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=344616

Обновление 10 марта 2014 года - Хорошие новости! Похоже, что билет был исправлен в Firefox 29, запланировано для выпуска 29 апреля 2014 года.

Обновление 30 апреля 2014 г.. Подтверждено, я просто попробовал, и Firefox 29 поддерживает input type="number".

Ответ 4

Нет браузер пока не понял. Пробег может отличаться, но во всех браузерах определенно будет работать.

Opera покажет вам интерфейс, позволяющий вам нажимать стрелки вверх и вниз, чтобы увеличить или уменьшить число. Однако вы можете отправить форму, даже если ничего, кроме номера, не было введено. Доступность еще не идеальна, но по крайней мере вы также можете использовать стрелки клавиатуры для увеличения и уменьшения числа.

У Chrome пока нет UI для номера, поэтому нет никакой помощи или нет визуального намека на то, что ожидается число. У Chrome также нет реального сообщения об ошибке. Поворот границы ввода слегка красным определенно не достаточно хорош по умолчанию, и он полностью недоступен. Chrome в основном является худшим нарушителем всех браузеров, когда речь идет о доступности, например. нулевая поддержка для ARIA.

Вы используете недопустимый псевдокласс для того, чтобы весь виджет ввода был красным. Обратите внимание, что это может быть яснее, чем стиль по умолчанию в Chrome, но он все еще не является доступным решением. Поскольку Chrome не поддерживает ARIA, плохая новость заключается в том, что даже если вы предоставите текстовое сообщение об ошибке через JavaScript, слепой пользователь или кто-либо другой, использующий устройство чтения с экрана, может вообще не слышать его.

Возможно, Firefox опаздывает в эту игру, но, пожалуйста, обратите внимание на то, что Mozilla очень строгие критерии доставки своих функций, а Chrome - вокруг, не думая о последствиях.

Ответ 5

Я использую firefox, у меня была та же проблема, что и мой вводный тип ввода символов и пробелов и т.д.... в любом случае я использую angular 2 в этих примерах, почти похоже на javascript, поэтому вы можете использовать этот код в каждом случае: вот html:

<input class="form-control form-control-sm" id="qte" type="number"  min="1" max="30" step="1" [(ngModel)]="numberVoucher"
     (keypress)="FilterInput($event)" />

вот функция FilterInput:

FilterInput(event: any) {
        let numberEntered = false;
        if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right
            //console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
            numberEntered = true;
        }
        else {
            //input command entered of delete, backspace or one of the 4 directtion up, down, left and right
            if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) {
                //console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
            }
            else {
                //console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
                event.preventDefault();
            }
        }
        // input is not impty
        if (this.validForm) {
            // a number was typed
            if (numberEntered) {
                let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which));
                console.log('new number : ' + newNumber);
                // checking the condition of max value
                if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) {
                    console.log('valid number : ' + newNumber);
                }
                else {
                    console.log('max value will not be valid');
                    event.preventDefault();
                }
            }
            // command of delete or backspace was types
            if (event.keyCode == 46 || event.which == 8) {
                if (this.numberVoucher >= 1 && this.numberVoucher <= 9) {
                    console.log('min value will not be valid');
                    this.numberVoucher = 1;
                    //event.preventDefault();
                    this.validForm = true;
                }
            }
        }
        // input is empty
        else {
            console.log('this.validForm = true');
            this.validForm = false;
        }
    };

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

Ответ 6

Firefox поддерживает шаблоны с 4.0

 <input name="hours" type="number" pattern="[-+]?[0-9]*[.,]?[0-9]+"/>

(Для справки см. http://html5pattern.com/)