HTML5 Tipo di input "numero" in Firefox

Question

Sto lavorando a un'app che è utilizzata solo da alcune persone in-house, quindi mi sento a mio agio nel dire che usano solo Firefox o Chrome, quindi posso usare HTML5.

stavo lavorando su una caratteristica molto semplice:

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

E le grandi opere in Chrome: diventa rosso e non ti permettono di inviare, senza di me codifica qualsiasi altra cosa.

Firefox ... non così tanto. Funziona come se avessi un tipo di "testo".

È un problema noto? Soluzione?

Grazie

Answer 1

Prima di tutto, stai usando Firefox 4? forme HTML5 ha un supporto molto migliore nella versione 4.

Questa pagina dettagli sulle forme HTML5 e gli insetti attuali https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

Aggiornamento: Se il browser non supporta HTML5 caratteristiche che si desidera utilizzare, provare Modernizr. Usa Javascript per migliorare il supporto. La documentazione è information about input types.

Answer 2

è che un problema noto?

Sì. I tipi sconosciuti sono trattati come testo. (E i tipi che appaiono solo nelle bozze delle specifiche tendono ad essere sconosciuti da molti browser)

Soluzione alternativa?

JavaScript

Answer 3

No browser ottiene questo ancora. Il chilometraggio può variare, ma c'è sicuramente lavoro da fare in tutti i browser.

Opera vi mostrerà un'interfaccia utente che consente di fare clic sulle frecce su e giù per aumentare o diminuire il numero. È tuttavia possibile inviare il modulo anche se è stato inserito un numero diverso da un numero. L'accessibilità non è ancora perfetta, ma almeno puoi anche usare le frecce della tastiera per aumentare e diminuire il numero.

Chrome non ha ancora un'interfaccia utente per il numero, quindi non vi è alcun aiuto o nessun suggerimento visivo che un numero è previsto. Chrome non ha alcun messaggio di errore reale. La rotazione del bordo di input leggermente rossa non è sicuramente sufficiente come impostazione predefinita ed è totalmente inaccessibile. Chrome è fondamentalmente il peggior autore di tutti i browser quando si tratta di accessibilità, ad es. supporto zero per ARIA.

Si sta utilizzando : pseudo-classe non valida per rendere rosso l'intero widget di input. Ti preghiamo di riconoscere che questo potrebbe essere più chiaro dello stile predefinito in Chrome, ma non è ancora una soluzione accessibile. Poiché Chrome non supporta ARIA, la cattiva notizia è che anche se fornissi un messaggio di errore di testo tramite JavaScript, un utente cieco o chiunque altro utilizzasse uno screen reader, potrebbe non sentirlo affatto.

Firefox potrebbe essere in ritardo per questo gioco, ma ti preghiamo di riconoscere il fatto che Mozilla ha very strict shipping criteria for its features, mentre Chrome gioca senza pensare alle conseguenze.

Answer 4

input type="number" non è ancora implementato in Firefox a partire dalla versione 25 (novembre 2013).

Bug 344616 è il biglietto rilevante in Bugzilla @ Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=344616

Aggiornamento 10 mar 2014 - Buone notizie! Sembra che il biglietto è stato fissato in Firefox 29, scheduled per il rilascio il 29 aprile 2014.

Aggiornamento 30 aprile 2014 - Confermato, ho solo dato una prova, e Firefox 29 ha il supporto per input type="number".

Answer 5

Firefox ha sostenuto i modelli dal 4,0

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

(Per informazioni, vedere http://html5pattern.com/)

Answer 6

sto usando Firefox, ho avuto lo stesso problema in via di sviluppo il mio ingresso numero del tipo a digitare lettere accentate e spazi, ecc .. . comunque im utilizzando angolare 2 in questi esempi, la sua quasi simile a JavaScript, in modo da poter utilizzare questo codice in tutti i casi: ecco l'HTML:

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

qui è la funzione 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; 
     } 
    }; 

in questa funzione ho dovuto lasciare che la pressione del tasto di numeri, direzione, cancella entrare, per cui questa funzione è solo per il numero intero positivo non doppie.