Chrome Auto Formate Eingabe = Nummer

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

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

Durch Angabe des Typs formatiert Chrome den Wert automatisch so, dass er ein Komma enthält (123.456). In anderen Browsern wird die Nummer 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?

Dies liegt an dem Verhalten, das mit dem HTML5- numberEingabetyp in Chromium verbunden ist, und Sie sind definitiv nicht der einzige , der sich nicht darum kümmert.

Ich habe dieses Problem in der Vergangenheit mithilfe des textTyps umgangen. Dies hat beispielsweise gut funktioniert (wurde gerade in Chrome 11.0.696.71 getestet):

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

Dieses Verhalten des numberTyps (zumindest für mich) ist definitiv ein Fehler, da der HTML5-Standard angibt, numberdass der Wert bei der Formatierung für die Anzeige den folgenden Wert haben soll:

Der Algorithmus zum Konvertieren einer Zahl in eine Zeichenfolge bei einer eingegebenen Zahl lautet wie folgt: Gibt eine gültige Gleitkommazahl zurück, die die Eingabe darstellt.

Und der Standard definiert eine „gültige Gleitkomma“ Nummer hier , und soweit ich sehen kann, einschließlich Gruppierungszeichens ist nicht zu erwarten.

Aktualisieren

Ich habe das Problem auf den folgenden Code in den Eingeweiden von WebKit beschränkt. Ich habe auch hier die Zeile eingefügt, die das Problem behebt:

// 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 nach meiner Rückkehr beim WebKit-Team einzureichen. Sobald sie (hoffentlich) den Patch akzeptiert haben, sollte Chromium ihn als Teil seines normalen Aktualisierungsprozesses einspielen.

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

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

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

Wenn die Nummer nicht gültig ist, können Sie Fehler erkennen und das Styling festlegen input[type=number]:invalid { background-color: red; }

Du könntest es versuchen ...

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

Dadurch wird die Eingabe von 0-9 in Firefox 4 auf dem Desktop sowie auf einem iPhone erzwungen. Ich habe Chrome nicht zur Hand, um es anzuprobieren, aber es sollte dasselbe tun.

Number ist einer der neuen HTML5-Eingabetypen. Es gibt viele davon - E-Mail, Datum, Uhrzeit, URL usw. Ich denke jedoch, dass bisher nur Chrome sie implementiert hat. Die anderen verwenden wieder 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 Schnüffeln des Benutzergeräts das falsche Ergebnis liefert, sollten Sie keine Probleme haben.

Beziehen Sie sich auf meine Antwort für diese ähnliche Frage .

Ich glaube, dass die Verwendung <input type="tel" />am logischsten ist, um diese Gefahr derzeit zu vermeiden. Die anderen Optionen sind faszinierend und für mich etwas neu (wie das patternAttribut), aber ich fand sie für mein Design unbefriedigend. Sie kann ich vor für Hilton nicht zu lange vervollständigen zu einem Screenshot einer mobilen Anwendung aussehen hier (es ist tatsächlich in der Antwort gezeigt ich zuerst verwiesen).

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

So verwende ich ein Muster, um die zwei Dezimalstellen zu formatieren:

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

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

Versuche dies:

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

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 Nummer in seinem lokalen Format anzuzeigen? Dies ist definitiv kein Fehler in Chrome, sondern 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.