Il numero del tipo di input HTML5 non funziona in firefox

Sto usando il HTML5 input type=number . Funziona perfettamente nel browser Chrome, ma non funziona in Firefox e IE9.

Voglio incrementare la quantità di one step=1 e inoltre ho impostato min=1 .

Sto usando il seguente codice:

 

C’è qualche patch o hack per farlo funzionare in Firefox e IE9. Oppure, quale potrebbe essere la soluzione ansible per questo.

Nota: l’attributo min del tag non è supportato in Internet Explorer 9 e versioni precedenti o in Firefox.

Nota: l’attributo min non funzionerà per le date e l’ora in Internet Explorer 10, poiché IE 10 non supporta questi tipi di input.

Fonte: http://www.w3schools.com/tags/att_input_min.asp

Non è supportato in firefox o internet explorer, ad eccezione della versione 11 che ha supporto parziale. Vedi questa matrice di confronto .

È ansible utilizzare lo shim per il polyfill del numero per ottenere supporto per i browser non supportati.

Il number tipo di input non è ancora supportato in Firefox o IE9 (quasi in IE10), quindi tornerà al text tipo di input.

Vedi questo grafico di compatibilità .

Non c’è davvero bisogno di una “patch o hack” – un normale campo di input funzionerà bene. Ecco perché ritorna in un campo di testo. Indipendentemente dal fatto che venga visualizzato come un campo numerico effettivo per l’utente finale è solo un bonus per renderlo leggermente più conveniente. Dovresti comunque eseguire controlli lato server su qualsiasi valore ti venga inviato, quindi consentire a un utente di digitare semplicemente un numero quando il browser non supporta il tipo di numero non dovrebbe recare alcun danno.

In alternativa, puoi usare un campo di testo con un attributo pattern="" . Sebbene non abbia i pulsanti su e giù, convalida per avere i valori corretti:

  

È ansible modificare il modello per i desideri di quantità, ora è impostato per un valore compreso tra 1 e 9 . Inoltre puoi aggiungere pulsanti su / giù con JS / jQuery che hanno tasti di scelta rapida associati a loro per una sensazione più simile a un campo numerico.

Non è supportato

Puoi usare javascript per lo stesso risultato se ne hai davvero bisogno.

C’è molto un esempio: valore di incremento del textinput con spinner jquery

sto usando firefox, ho avuto lo stesso problema sviluppando il mio tipo di input digitando caratteri e spazi ecc … comunque usando l’angular 2 in questo esempio, è quasi simile a javascript, quindi puoi usare questo codice in ogni caso: ecco l’html:

  

ecco 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 dovevo semplicemente lasciare entrare la pressione dei tasti di numeri, direzione, cancella.