web-dev-qa-db-fra.com

Entrée automatique de formats Chrome = nombre

J'ai une application Web dans laquelle je spécifie qu'un champ de saisie est un nombre utilisant la propriété HTML5 type = "number".

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

En spécifiant le type, Chrome formate automatiquement la valeur pour inclure une virgule (123 456). Dans d'autres navigateurs, il ne formate pas le nombre, mais n'empêche pas les caractères non numériques. 

Dans ce cas, je ne veux pas que la virgule soit ajoutée. Existe-t-il un moyen de désactiver le formatage localisé?

html5google-chromeinput
70
Donovan Woodside

Cela est dû au comportement associé au type d'entrée HTML5 number dans Chromium et vous êtes certainement pas le seul qui ne s'en soucie pas.

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

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

Ce comportement de type number (du moins pour moi) est certainement un bogue, car le standard HTML5 spécifie que number doit avoir la valeur suivante lors de son formatage pour l'affichage:

L'algorithme permettant de convertir un nombre en chaîne, à partir d'un nombre saisi, est le suivant: Renvoie un nombre à virgule flottante valide représentant l'entrée.

Et la norme définit un nombre "à virgule flottante valide" ici et, autant que je sache, il n’est pas prévu de regrouper les caractères.

Mettre à jour

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

// 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 prévoyez de soumettre ce correctif à l'équipe WebKit à mon retour. Une fois qu'ils ont (espérons-le) accepté le patch, Chromium doit le récupérer dans le cadre de son processus de rafraîchissement normal.

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

92
arcain

Il y a quelques propriétés supplémentaires que vous pouvez vérifier, dont valueAsNumber.

Chrome tente de vous fournir la meilleure méthode de saisie possible en fonction du type de saisie. Dans ce cas, nombre dispose également de capacités supplémentaires telles que basculer vers le haut et le bas.

Si le nombre n'est pas valide, vous pourrez détecter des erreurs et définir le style input[type=number]:invalid { background-color: red; }.

5
Kinlan

Tu pourrais essayer ...

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

qui imposera l'entrée de 0-9 sur Firefox 4 sur le bureau ainsi que sur un iPhone; Je n'ai pas Chrome sous la main pour l'essayer, mais il devrait en faire de même.

5
gdt

Le nombre est l'un des nouveaux types de saisie HTML5. Il y en a beaucoup - email, date, heure, URL, etc. Cependant, je pense que seul Chrome les a mis en œuvre à ce jour. Les autres ont recours au type par défaut (texte).

Pour plus d'informations sur les types de saisie HTML5: http://diveintohtml5.ep.io/forms.html

Si vous souhaitez le désactiver sur Chrome, vous pouvez le laisser sous forme de texte et le changer en nombre si la machine de l'utilisateur est un ordinateur de poche. Etant donné que le reniflement de la machine utilisateur ne donne pas un résultat erroné, vous ne devriez pas avoir de problème.

3
Dan Blows

Reportez-vous à ma réponse pour cette question similaire .

Je crois que l’utilisation de <input type="tel" /> est tout à fait logique pour éviter ce piège actuellement. Les autres options sont intéressantes et légèrement nouvelles pour moi (comme l'attribut pattern) mais je les ai trouvées peu satisfaisantes pour ma conception. Vous pouvez consulter une capture d'écran d'une application mobile que je complète pour Hilton il n'y a pas si longtemps ici (elle apparaît en fait dans la réponse que j'ai citée en premier).

2
Gabriel Ryan Nahmias

Essaye ça:

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

Pourquoi voudriez-vous désactiver le formatage localisé? Si vous souhaitez un format différent, il vous suffit de modifier les paramètres de localisation de votre PC. Pourquoi un utilisateur pas serait-il intéressé à afficher un nombre dans son format local? Ceci est certainement pas un bug dans Chrome mais une fonctionnalité!

Il me semble que vous n'utilisez pas vraiment un "nombre" comme entrée, mais plutôt un code "texte" avec un motif. Voir les autres postes pour des suggestions à cela.

0
Aristoteles

Voici toute une liste d’expressions régulières que vous pouvez intégrer à l’attribut "pattern" de la balise HTML: HTML5 Pattern

Voici comment j'utilise un modèle pour formater le nombre deux points décimaux:

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

Malheureusement, cela ne semble pas fonctionner correctement sur l'iPad.

0
hoekma