HTML5 Eingabetyp Nummer funktioniert nicht in Firefox

Question

Ich verwende HTML5 input type=number. Es funktioniert perfekt im Chrome-Browser, aber es funktioniert nicht in Firefox und IE9.

Ich möchte die Menge von one, d. H. step=1 erhöhen und auch ich habe min=1 gesetzt.

Ich verwende den folgenden Code ein:

<form action="" class="cart" method="post" enctype='multipart/form-data'> 
    <div class="quantity"> 
     <input type="number" step="1" min="1" name="quantity" value="1" title="Qty" class="input-text qty text" /> 
    </div> 
    <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>  
</form> 

Gibt es einen Patch oder hacken, um es in Firefox und IE9 zu arbeiten. Oder was könnte die mögliche Lösung dafür sein?

Answer 1

Hinweis: Das Attribut min des Tags wird in Internet Explorer 9 und früheren Versionen oder in Firefox nicht unterstützt.

Hinweis: Das Attribut "min" funktioniert nicht für Datum und Uhrzeit in Internet Explorer 10, da IE 10 diese Eingabeformate nicht unterstützt.

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

Answer 2

Es ist nicht in Firefox oder Internet Explorer unterstützt, mit Ausnahme der Version 11, die teilweise Unterstützung. Siehe this comparison matrix.

Sie können das number polyfill Shim verwenden, um Unterstützung für nicht unterstützte Browser zu erhalten.

Answer 3

Der Eingangstyp number wird in Firefox oder IE9 (fast in IE10) noch nicht unterstützt, daher wird der Eingangstyp text wiederhergestellt.

Siehe this compatibility chart.

Es gibt wirklich keine Notwendigkeit für einen "Patch oder Hack" - ein reguläres Eingabefeld wird gut funktionieren. Deshalb wird es in ein Textfeld zurückgesetzt. Ob es als tatsächliches Zahlenfeld für den Endbenutzer angezeigt wird, ist nur ein Bonus, um es etwas bequemer zu machen. Sie sollten immer noch serverseitige Überprüfungen des Werts durchführen, der an Sie gesendet wird, sodass ein Benutzer nur dann eine Nummer eingeben kann, wenn sein Browser den Nummerntyp nicht unterstützt.

Answer 4

Es wird nicht unterstützt.

Sie können Javascript für das gleiche Ergebnis verwenden, wenn Sie es wirklich brauchen.

eine Menge Es gibt ein Beispiel: Increment value of textinput with jquery like spinner

Answer 5

Alternativ können Sie ein Textfeld mit einem pattern="" Attribute verwenden. Obwohl es nicht die Auf- und Ab-Taste hat, ist es tut Validate für die richtigen Werte aufweisen:

<input type="text" 
     name="quantity" 
     pattern="[1-9]" 
     value="1" 
     required 
     title="Qty" 
     class="input-text qty text" 
/> 

Sie das Muster ändern können Ihre Quantität wünscht, ist es nun für einen Wert im Bereich von bis . Sie können auch Schaltflächen mit JS/jQuery auf/ab-Tasten hinzufügen, an die Hotkeys gebunden sind, um ein mehr Zahlenfeld zu erhalten.

Answer 6

ich benutze firefox, ich hatte das gleiche Problem bei der Entwicklung meiner Eingabe Typ Nummer Eingabe von Zeichen und Leerzeichen etc ... ohnehin Winkel 2 in dieser Beispiele mit im, dessen Javascript fast ähnlich, so können Sie diesen Code in jedem Fall verwenden: hier ist die html:

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

hier wird die Funktion filter:

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 dieser Funktion musste ich einfach den Tastendruck von Zahlen, Richtung, Löschen eingeben lassen.