HTML5 Tipo de entrada "número" en Firefox

Question

Estoy trabajando en una aplicación que solo es utilizada por algunas personas en la empresa, por lo que me siento cómodo diciéndoles que solo utilicen Firefox o Chrome, así que puedo usar HTML5.

que estaba trabajando en una característica muy simple:

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

Funciona muy bien en Chrome: se convierte en rojo y no permitirá que usted envíe, sin que yo codificación de cualquier otra cosa.

Firefox ... no tanto. Actúa como si tuviera un tipo de "texto".

¿Es esto un problema conocido? ¿Solución alternativa?

Gracias

Answer 1

En primer lugar, ¿está utilizando Firefox 4? formularios HTML5 tiene mucho mejor soporte en la versión 4.

Esta página tiene más información sobre las formas de HTML5 y los errores actuales https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

Actualización: Si el navegador no soporta el HTML 5 características que desea usar, tratar Modernizr. Utiliza Javascript para mejorar el soporte. Su documentación tiene information about input types.

Answer 2

es que un problema conocido?

Sí. Los tipos desconocidos se tratan como texto. (Y los tipos que solo aparecen en las especificaciones preliminares tienden a ser desconocidos en muchos navegadores)

¿Qué tal?

JavaScript

Answer 3

No navegador consigue esto todavia. El kilometraje puede variar, pero definitivamente hay trabajo por hacer en todos los navegadores.

Opera le mostrará una interfaz de usuario que le permite hacer clic en las flechas hacia arriba y hacia abajo para aumentar o disminuir el número. Sin embargo, puede enviar el formulario aunque se haya ingresado un número. La accesibilidad aún no es perfecta, pero al menos también puede usar las flechas del teclado para aumentar y disminuir el número.

Chrome no tiene UI para el número aún, por lo tanto no hay ayuda o no hay ninguna pista visual que se espera un número. Chrome tampoco tiene un mensaje de error real. Al girar el borde de entrada ligeramente rojo definitivamente no es lo suficientemente bueno como predeterminado y es totalmente inaccesible. Chrome básicamente es el peor infractor de todos los navegadores en lo que respecta a la accesibilidad, p. cero soporte para ARIA.

Está utilizando la : pseudo-clase no válida para hacer que todo el widget de entrada se vuelva rojo. Tenga en cuenta que esto puede ser más claro que el estilo predeterminado en Chrome, pero todavía no es una solución accesible. Dado que Chrome no es compatible con ARIA, la mala noticia es que incluso si proporcionara un mensaje de error de texto a través de JavaScript, un usuario ciego o cualquier persona que use un lector de pantalla podría no escucharlo en absoluto.

Es posible que Firefox llegue tarde a este juego, pero reconozca que Mozilla tiene very strict shipping criteria for its features, mientras que Chrome juega sin pensar en las consecuencias.

Answer 4

input type="number" aún no está implementado en Firefox a partir de la versión 25 (noviembre de 2013).

Bug 344616 es el billete correspondiente en Bugzilla @ Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=344616

de marzo de 2014 Actualización 10 de - Buenas noticias! Parece que el billete se fijó en Firefox 29, scheduled a la venta el 29 de abril de 2014.

Actualización 30 de abril de 2014 - Confirmado, sólo que probarlo, y Firefox 29 tiene soporte para input type="number".

Answer 5

Firefox ha apoyado patrones desde 4,0

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

(Para obtener ayuda, consulte http://html5pattern.com/)

Answer 6

estoy usando Firefox, que tenía el mismo problema el desarrollo de mi número de tipo de introducción de datos carácteres y espacios etc .. . im usando todas formas angulares 2 en este ejemplo, es casi similar a Javascript, por lo que puede utilizar este código en todos los casos: aquí es el html:

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

aquí es la función 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; 
     } 
    }; 

en esta función que tenía que dejar que la pulsación de teclas de números, dirección, borra entrar, por lo que esta función es sólo para no entero positivo dobles.