Auto Chrome formats d'entrée=nombre

Question

J'ai une application web où je suis la spécification d'un champ de saisie d'un numéro à l'aide du HTML5 propriété type="number".

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

En précisant le type, Chrome automatiquement les formats de la valeur pour inclure une virgule (123,456). Dans d'autres navigateurs, il n'est pas le nombre, mais cela ne doit pas empêcher de caractères non numériques.

Dans ce cas, je ne veux pas la virgule à ajouter. Est-il possible de désactiver la mise en forme localisée?

Answer 1

Cela se produit parce que le comportement associé à l'HTML5 number type d'entrée dans Chrome, et vous êtes certainement pas le seul qui ne se soucient pas de cela.

J'ai travaillé autour de ce problème dans le passé en utilisant l' text type. Par exemple, cela a bien fonctionné (testé tout à l'heure de Chrome 11.0.696.71):

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

Ce comportement de l' number type (pour moi, du moins), c'est certainement un bug, parce que le standard HTML5 spécifie l' number doit avoir la valeur suivante lorsque mis en forme pour l'affichage:

L'algorithme pour convertir un nombre en chaîne, étant donné un nombre d'entrée, est comme suit: Retour valide d'un nombre à virgule flottante qui représente l'entrée.

Et la norme définit un "valide à virgule flottante" nombre ici, et aussi loin que je peux voir, y compris le groupement des personnages n'est pas prévu.

---

Mise à jour

J'ai isolé le problème pour le code suivant vers le bas dans les entrailles de WebKit. J'ai inclus la ligne qui résout le problème ici:

// 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());
}

Je suis en vacances la semaine prochaine, mais le plan sur la soumission de ce patch pour le WebKit de l'équipe quand je reviendrai. Une fois qu'ils (espérons-le) d'accepter le patch, Chrome devrait-elle tirer dans le cadre normal de ses processus d'actualisation.

---

Vous pouvez voir le code original ici, le corrigé de révision ici, et la diff de la fichier original et le fichier patché ici. Le dernier patch a été créé par Shinya Kawanaka.

Answer 2

Il ya un couple de propriétés supplémentaires que vous pouvez vérifier, y compris valueAsNumber.

Chrome tente de vous fournir la meilleure méthode de saisie possible, en se basant sur le type d'entrée. Dans ce cas, le nombre a aussi quelques capacités supplémentaires telles que la bascule vers le haut et vers le bas.

Le point de cet, est si le numéro n'est pas valide, vous serez en mesure de détecter la présence d'erreurs et aussi de définir le style input[type=number]:invalid { background-color: red; }

Answer 3

Vous pouvez essayer ...

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

qui va forcer l'entrée de 0 à 9 sur Firefox 4 sur le bureau ainsi que d'un iPhone, je n'ai pas Chrome à portée de main de l'essayer, mais il doit faire de même.

Answer 4

Le nombre est l'un des nouveaux types d'entrée HTML5. Il y a des charges de ces email, la date, l'heure, url, etc. Cependant, je pense que Chrome a mis en œuvre jusqu'à présent. Les autres en utilisant le type par défaut (texte).

Pour plus d'informations sur les types d'entrée HTML5: http://diveintohtml5.ep.io/forms.html

Si vous souhaitez le désactiver sur Chrome, vous pouvez laisser comme du texte et de le modifier pour le nombre si l'appareil de l'utilisateur est un ordinateur de poche. Puisque ce n'est pas une convivialité tueur si l'appareil de l'utilisateur renifler donne un mauvais résultat, vous ne devriez pas avoir de problèmes.

Answer 5

Se référer à ma réponse pour cette question semblable.

Je crois que l'aide <input type="tel" /> est le plus logique pour éviter cet écueil actuellement. Les autres options sont intriguant et un peu nouveau pour moi (comme l' pattern d'attribut), mais j'ai trouvé insatisfaisant pour mon dessin. Vous pouvez voir une capture d'écran d'une application mobile de je complet pour Hilton a pas trop longtemps ici (c'est en fait indiqué dans la réponse que j'ai référencé pour la première fois).