Ich baue eine Web-App, die hauptsächlich für mobile Browser ist. Ich verwende Eingabefelder mit Nummerntyp, daher rufen (die meisten) mobilen Browser zur besseren Benutzererfahrung nur die Zifferntastatur auf. Diese Web-App wird hauptsächlich in Regionen verwendet, in denen das Dezimaltrennzeichen ein Komma und kein Punkt ist. Daher muss ich beide Dezimaltrennzeichen verarbeiten.

Wie kann man dieses ganze Durcheinander mit Punkt und Komma abdecken?

Meine Ergebnisse:

Desktop Chrome

• Eingabetyp = Nummer
• Der Benutzer gibt "4,55" in das Eingabefeld ein
• $("#my_input").val(); gibt "455" zurück
• Ich kann nicht den richtigen Wert von der Eingabe erhalten

Desktop Firefox

• Eingabetyp = Nummer
• Der Benutzer gibt "4,55" in das Eingabefeld ein
• $("#my_input").val(); gibt "4,55" zurück
• Das ist in Ordnung, ich kann Komma durch Punkt ersetzen und den richtigen Float erhalten

Android-Browser

• Eingabetyp = Nummer
• Der Benutzer gibt "4,55" in das Eingabefeld ein
• Wenn die Eingabe den Fokus verliert, wird der Wert auf "4" gekürzt.
• Verwirrend für den Benutzer

Windows Phone 8

• Eingabetyp = Nummer
• Der Benutzer gibt "4,55" in das Eingabefeld ein
• $("#my_input").val(); gibt "4,55" zurück
• Das ist in Ordnung, ich kann Komma durch Punkt ersetzen und den richtigen Float erhalten

Was sind die "Best Practices" in solchen Situationen, in denen der Benutzer möglicherweise Komma oder Punkt als Dezimaltrennzeichen verwendet und ich den HTML-Eingabetyp als Zahl beibehalten möchte, um eine bessere Benutzererfahrung zu erzielen?

Kann ich Komma "on the fly" in Punkt umwandeln, um Schlüsselereignisse zu binden? Funktioniert es mit Zahleneingaben?

BEARBEITEN

Derzeit habe ich keine Lösung, wie man den Gleitkommawert (als Zeichenfolge oder Zahl) von der Eingabe erhält, deren Typ auf Zahl gesetzt ist. Wenn der Endbenutzer "4,55" eingibt, gibt Chrome immer "455" zurück, Firefox gibt "4,55" zurück, was in Ordnung ist.

Es ist auch ziemlich ärgerlich, dass in Android (getesteter 4.2-Emulator) die eingegebene Zahl auf "4" gekürzt wird, wenn ich "4,55" in das Eingabefeld eingebe und den Fokus auf eine andere Stelle ändere.

Ich denke, was in den obigen Antworten fehlt, ist die Notwendigkeit, einen anderen Wert für das stepAttribut anzugeben , der einen Standardwert von hat 1. Wenn der Validierungsalgorithmus der Eingabe Gleitkommawerte zulassen soll, geben Sie einen entsprechenden Schritt an.

Zum Beispiel wollte ich Dollarbeträge, also habe ich einen Schritt wie diesen angegeben:

 <input type="number" name="price"
           pattern="[0-9]+([\.,][0-9]+)?" step="0.01"
            title="This should be a number with up to 2 decimal places.">

Es ist nichts Falsches daran, den Wert mit jQuery abzurufen, aber Sie werden es nützlich finden, die DOM-API direkt zu verwenden, um die validity.validEigenschaft der Elemente abzurufen .

Ich hatte ein ähnliches Problem mit dem Dezimalpunkt, aber der Grund, warum ich feststellte, dass es ein Problem gab, war das Styling, das Twitter Bootstrap einer Zahleneingabe mit einem ungültigen Wert hinzufügt.

Hier ist eine Geige, die zeigt, dass das Hinzufügen des stepAttributs funktioniert, und auch testet, ob der aktuelle Wert gültig ist:

• jsFiddle

TL; DR: Setzen Sie das a- stepAttribut auf einen Gleitkommawert, da es standardmäßig verwendet wird 1.

HINWEIS : Das Komma wird für mich nicht überprüft, aber ich vermute, dass es funktionieren würde, wenn ich die Einstellungen für die Sprache / Region meines Betriebssystems auf einen Ort setze, an dem ein Komma als Dezimaltrennzeichen verwendet wird. * Anmerkung in Anmerkung *: Dies war bei Betriebssystem- / Tastatureinstellungen nicht der Fall. * Deutsch * in Ubuntu / Gnome 14.04.

Nach w3.org der Wert Attribut der Nummer eingegeben wird , als definierter Gleitkommazahl . Die Syntax der Gleitkommazahl scheint nur Punkte als Dezimaltrennzeichen zu akzeptieren.

Ich habe nachfolgend einige Optionen aufgeführt, die für Sie hilfreich sein könnten:

1. Verwenden des Musterattributs

Mit dem Musterattribut können Sie das zulässige Format mit einem regulären Ausdruck auf HTML5-kompatible Weise angeben. Hier können Sie angeben, dass das Kommazeichen zulässig ist, und eine hilfreiche Rückmeldung erhalten, wenn das Muster fehlschlägt.

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num"
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

Hinweis: browserübergreifende Unterstützung ist sehr unterschiedlich. Es kann vollständig, teilweise oder nicht vorhanden sein.

2. JavaScript-Validierung

Sie könnten versuchen, einen einfachen Rückruf beispielsweise an den Wechsel (und / oder die Unschärfe) zu binden ) Fall , dass das Komma entweder ersetzen würde oder alle zusammen validieren.

3. Deaktivieren Sie die Browserüberprüfung ##

Drittens könnten Sie versuchen, das Attribut formnovalidate für die Zahleneingaben zu verwenden, um die Browserüberprüfung für dieses Feld insgesamt zu deaktivieren.

<input type="number" formnovalidate />

4. Kombination ..?

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" 
           name="my-num" formnovalidate
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

Ob für das Dezimaltrennzeichen Komma oder Punkt verwendet wird, liegt ganz beim Browser. Der Browser trifft seine Entscheidung basierend auf dem Gebietsschema des Betriebssystems oder Browsers, oder einige Browser nehmen Hinweise von der Website entgegen. Ich habe eine Browser-Vergleichstabelle erstellt, die zeigt, wie verschiedene Browser unterschiedliche Lokalisierungsmethoden unterstützen. Safari ist der einzige Browser, der Kommas und Punkte austauschbar verarbeitet.

Grundsätzlich können Sie als Webautor dies nicht wirklich kontrollieren. Bei einigen Problemumgehungen werden zwei Eingabefelder mit Ganzzahlen verwendet. Auf diese Weise kann jeder Benutzer die Daten wie erwartet eingeben. Es ist nicht besonders sexy, aber es wird in jedem Fall für alle Benutzer funktionieren.

Verwenden Sie valueAsNumberanstelle von .val().

Eingabe. valueAsNumber [= Wert]

Gibt gegebenenfalls eine Zahl zurück, die den Wert des Formularsteuerelements darstellt. Andernfalls wird null zurückgegeben.
Kann eingestellt werden, um den Wert zu ändern.
Löst eine INVALID_STATE_ERR-Ausnahme aus, wenn das Steuerelement weder datums- oder zeitbasiert noch numerisch ist.

Verwendet einen Texttyp, erzwingt jedoch das Erscheinungsbild der numerischen Tastatur

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

Das InputMode-Tag ist die Lösung

Ich habe keine perfekte Lösung gefunden, aber das Beste, was ich tun konnte, war, type = "tel" zu verwenden und die HTML5-Validierung (formnovalidate) zu deaktivieren:

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />

Wenn der Benutzer ein Komma eingibt, wird es in jedem modernen Browser, den ich ausprobiert habe, mit dem Komma ausgegeben (neuestes FF, IE, Edge, Oper, Chrome, Safari Desktop, Android Chrome).

Das Hauptproblem ist:

• Mobile Benutzer sehen ihre Telefontastatur, die sich möglicherweise von der Zifferntastatur unterscheidet.
• Schlimmer noch, die Telefontastatur hat möglicherweise nicht einmal eine Kommataste.

Für meinen Anwendungsfall musste ich nur:

• Zeigen Sie den Anfangswert mit einem Komma an (Firefox entfernt ihn für Typ = Nummer).
• Nicht fehlschlagen HTML5-Validierung (wenn es ein Komma gibt)
• Lassen Sie das Feld genau als Eingabe lesen (mit einem möglichen Komma).

Wenn Sie eine ähnliche Anforderung haben, sollte dies für Sie funktionieren.

Hinweis: Die Unterstützung des Musterattributs hat mir nicht gefallen. Das Formnovalidat scheint viel besser zu funktionieren.

Wenn Sie es aufrufen, wird $("#my_input").val();es als Zeichenfolgenvariable zurückgegeben. Also verwenden parseFloatund parseIntzum Konvertieren. Wenn Sie parseFloatIhren Desktop oder Ihr Telefon verwenden, versteht ITSELF die Bedeutung von Variablen.

Außerdem können Sie einen Float in einen String konvertieren, indem Sie toFixedein Argument verwenden, das die Anzahl der Ziffern wie folgt enthält:

var i = 0.011;
var ss = i.toFixed(2); //It returns 0.01

Meine Empfehlung? Verwenden Sie jQuery überhaupt nicht. Ich hatte das gleiche Problem wie du. Ich fand, dass $('#my_input').val()immer ein seltsames Ergebnis zurückkommt.

Versuchen Sie, document.getElementById('my_input').valueAsNumberanstelle von $("#my_input").val();und dann Number(your_value_retrieved)zu versuchen, eine Nummer zu erstellen. Wenn der Wert NaN ist, wissen Sie sicher, dass dies keine Zahl ist.

Wenn Sie eine Zahl in die Eingabe schreiben, akzeptiert die Eingabe tatsächlich fast jedes Zeichen (ich kann das Euro-Zeichen, einen Dollar und alle anderen Sonderzeichen schreiben). Daher ist es am besten, den Wert mit abzurufen .valueAsNumberanstatt jQuery zu verwenden.

Übrigens können Ihre Benutzer damit Internationalisierung hinzufügen (dh Kommas anstelle von Punkten unterstützen, um Dezimalzahlen zu erstellen). Lassen Sie das Number()Objekt einfach etwas für Sie erstellen und es ist sozusagen dezimalsicher.

Klingt so, als würden Sie toLocaleString () für Ihre numerischen Eingaben verwenden.

Informationen zur Verwendung finden Sie unter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString .

Die Lokalisierung von Zahlen in JS wird auch in der Internationalisierung (Zahlenformatierung "num.toLocaleString ()") behandelt, die für Chrome nicht funktioniert

Anscheinend haben Browser immer noch Probleme (obwohl Chrome und Firefox Nightly gut funktionieren). Ich habe einen hackigen Ansatz für die Leute, die wirklich ein Zahlenfeld verwenden müssen (vielleicht wegen der kleinen Pfeile, die Textfelder nicht haben).

Meine Lösung

Ich keyuphabe der Formulareingabe einen Ereignishandler hinzugefügt, den Status verfolgt und den Wert festgelegt, sobald er wieder gültig ist.

Reines JS-Snippet JSFIDDLE

var currentString = '';
var badState = false;
var lastCharacter = null;

document.getElementById("field").addEventListener("keyup",($event) => {
  if ($event.target.value && !$event.target.validity.badInput) {
          currentString = $event.target.value;
  } else if ($event.target.validity.badInput) {
    if (badState && lastCharacter && lastCharacter.match(/[\.,]/) && !isNaN(+$event.key)) {
      $event.target.value = ((+currentString) + (+$event.key / 10));
      badState = false;
    } else {
      badState = true;
    }
  }
  document.getElementById("number").textContent = $event.target.value;
  lastCharacter = $event.key;
});

document.getElementById("field").addEventListener("blur",($event) => {
	if (badState) {
    $event.target.value = (+currentString);
    badState = false;
		document.getElementById("number").textContent = $event.target.value;
  }
});

#result{
  padding: 10px;
  background-color: orange;
  font-size: 25px;
  width: 400px;
  margin-top: 10px;
  display: inline-block;
}

#field{
  padding: 5px;
  border-radius: 5px;
  border: 1px solid grey;
  width: 400px;
}

<input type="number" id="field" keyup="keyUpFunction" step="0.01" placeholder="Field for both comma separators">

<span id="result" >
 <span >Current value: </span>
 <span id="number"></span>
</span>

Angular 9 Snippet

@Directive({
  selector: '[appFloatHelper]'
})
export class FloatHelperDirective {
  private currentString = '';
  private badState = false;
  private lastCharacter: string = null;

  @HostListener("blur", ['$event']) onBlur(event) {
    if (this.badState) {
      this.model.update.emit((+this.currentString));
      this.badState = false;
    }
  }

  constructor(private renderer: Renderer2, private el: ElementRef, private change: ChangeDetectorRef, private zone: NgZone, private model: NgModel) {
    this.renderer.listen(this.el.nativeElement, 'keyup', (e: KeyboardEvent) => {
      if (el.nativeElement.value && !el.nativeElement.validity.badInput) {
        this.currentString = el.nativeElement.value;
      } else if (el.nativeElement.validity.badInput) {
        if (this.badState && this.lastCharacter && this.lastCharacter.match(/[\.,]/) && !isNaN(+e.key)) {
          model.update.emit((+this.currentString) + (+e.key / 10));
          el.nativeElement.value = (+this.currentString) + (+e.key / 10);
          this.badState = false;
        } else {
          this.badState = true;
        }
      }       
      this.lastCharacter = e.key;
    });
  }
  
}

<input type="number" matInput placeholder="Field for both comma separators" appFloatHelper [(ngModel)]="numberModel">