wake-up-neo.net

Chrome Auto-Formateingabe = Nummer

Ich habe eine Webanwendung, bei der ich ein Eingabefeld als eine Zahl mit der HTML5-Eigenschaft type = "number" spezifizieren.

<input type="number" value="123456" />

Durch die Angabe des Typs formatiert Chrome den Wert automatisch mit einem Komma (123,456). In anderen Browsern wird die Zahl nicht formatiert, aber auch nicht numerische Zeichen werden nicht verhindert. 

In diesem Fall möchte ich nicht, dass das Komma hinzugefügt wird. Gibt es eine Möglichkeit, die lokalisierte Formatierung zu deaktivieren?

70

Dies ist auf das Verhalten zurückzuführen, das mit dem HTML5-Variablentyp number in Chromium verbunden ist, und Sie sind definitiv und nicht der einzige , der dies nicht interessiert.

Ich habe dieses Problem in der Vergangenheit mit dem Typ text gelöst. Das hat zum Beispiel gut funktioniert (gerade getestet in Chrome 11.0.696.71):

<input type="text" 
       placeholder="Enter Text" 
       name="inputName" 
       pattern="[0-9]*">

Dieses Verhalten des number-Typs (zumindest für mich) ist definitiv ein Fehler, da der HTML5-Standard angibt, dass die number den folgenden Wert haben sollte, wenn sie für die Anzeige formatiert ist:

Der Algorithmus zum Konvertieren einer Zahl in eine Zeichenfolge lautet bei gegebener Zahleneingabe folgendermaßen: Geben Sie eine gültige Gleitkommazahl zurück, die die Eingabe darstellt.

Und der Standard definiert eine "gültige Fließkommazahl" hier , und soweit ich sehen kann, wird das Einschließen von Gruppierungszeichen nicht erwartet.


Aktualisieren

Ich habe das Problem auf den folgenden Code in den Innern von WebKit isoliert. Ich habe die Zeile, die das Problem behebt, auch hier eingefügt:

// From LocalizedNumberICU.cpp
String formatLocalizedNumber(double number, unsigned fractionDigits)
{
    NumberFormat* formatter = numberFormatter();
    if (!formatter)
        return String();
    UnicodeString result;
    formatter->setMaximumFractionDigits(clampToInteger(fractionDigits));
    formatter->setGroupingUsed(FALSE); // added this line to fix the problem
    formatter->format(number, result);
    return String(result.getBuffer(), result.length());
}

Ich bin nächste Woche im Urlaub, habe aber vor, diesen Patch dem WebKit-Team zu übermitteln, wenn ich wiederkomme. Sobald sie (hoffentlich) den Patch akzeptiert haben, sollte Chromium es als Teil des normalen Aktualisierungsprozesses einlesen.


Sie können den Originalcode hier , die gepatchte Revision hier und den Unterschied der .__ sehen. Originaldatei und die gepatchte Datei hier . Der letzte Patch wurde von Shinya Kawanaka erstellt.

92
arcain

Es gibt einige zusätzliche Eigenschaften, die Sie überprüfen können, einschließlich valueAsNumber.

Chrome versucht, basierend auf dem Eingabetyp die bestmögliche Eingabemethode bereitzustellen. In diesem Fall hat number auch einige zusätzliche Fähigkeiten, wie das Umschalten nach oben und unten.

Wenn die Nummer nicht gültig ist, können Sie feststellen, dass Fehler aufgetreten sind, und auch den Stil festlegen. input[type=number]:invalid { background-color: red; }

5
Kinlan

Du könntest es versuchen ...

<input type="text" pattern="[0-9]*" value="123456" />

dadurch wird der Eintrag 0-9 in Firefox 4 auf dem Desktop sowie auf einem iPhone erzwungen. Ich habe kein Chrome zum Anprobieren, aber es sollte dasselbe tun.

5
gdt

Number ist einer der neuen HTML5-Eingabetypen. Es gibt unzählige davon - E-Mail, Datum, Uhrzeit, URL usw. Ich denke jedoch, dass nur Chrome sie bisher implementiert hat. Die anderen verwenden den Standardtyp (Text).

Weitere Informationen zu HTML5-Eingabetypen: http://diveintohtml5.ep.io/forms.html

Wenn Sie es in Chrome deaktivieren möchten, können Sie es als Text belassen und in Nummer ändern, wenn das Benutzergerät ein Handheld ist. Da es kein Usability Killer ist, wenn das Sniffing des Benutzergeräts zu einem falschen Ergebnis führt, sollten Sie keine Probleme haben.

3
Dan Blows

Siehe meine Antwort für diese ähnliche Frage .

Ich glaube, dass <input type="tel" /> am logischsten ist, um diese Falle derzeit zu vermeiden. Die anderen Optionen sind faszinierend und für mich etwas neu (wie das Attribut pattern), aber ich fand sie für mein Design unbefriedigend. Sie können einen Screenshot einer mobilen Anwendung sehen, die ich vor nicht allzu langer Zeit für Hilton fertig gestellt habe hier (dies ist tatsächlich in der Antwort dargestellt, auf die ich zuerst verwiesen habe).

Versuche dies:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('[type=number]').attr('type', 'text').attr('pattern', '[0-9]*');
}
1
tiriana

Warum sollten Sie die lokalisierte Formatierung deaktivieren? Wenn Sie ein anderes Format wünschen, ändern Sie einfach die Lokalisierungseinstellungen Ihres PCs. Warum sollte ein Benutzer nicht daran interessiert sein, eine Zahl in seinem lokalen Format anzuzeigen? Dies ist definitiv kein Fehler in Chrome aber eine Funktion!

Mir scheint, Sie verwenden nicht wirklich eine "Zahl" als Eingabe, sondern einen "Text" -Code mit einem Muster. In den anderen Beiträgen finden Sie Vorschläge dazu.

0
Aristoteles

Hier ist eine ganze Liste regulärer Ausdrücke, die Sie in das Attribut "pattern" des HTML-Eingabe-Tags einfügen können: HTML5 Pattern

Hier ist, wie ich ein Muster verwende, um die Zahl mit zwei Dezimalstellen zu formatieren:

<input type="number" pattern="\d+(\.\d{2})?" />

Leider scheint es auf dem iPad nicht ganz richtig zu funktionieren.

0
hoekma