Je construis une application Web qui est principalement destinée aux navigateurs mobiles. J'utilise des champs de saisie avec le type de nombre, donc (la plupart) les navigateurs mobiles n'appellent que le clavier numérique pour une meilleure expérience utilisateur. Cette application Web est principalement utilisée dans les régions où le séparateur décimal est une virgule, pas un point, je dois donc gérer les deux séparateurs décimaux.

Comment couvrir tout ce désordre avec des points et des virgules?

Mes découvertes:

Chrome de bureau

• Type d'entrée = nombre
• L'utilisateur entre «4,55» dans le champ de saisie
• $("#my_input").val(); renvoie "455"
• Je ne peux pas obtenir la valeur correcte de l'entrée

Firefox de bureau

• Type d'entrée = nombre
• L'utilisateur entre «4,55» dans le champ de saisie
• $("#my_input").val(); renvoie "4,55"
• C'est bien, je peux remplacer la virgule par un point et obtenir un flotteur correct

Navigateur Android

• Type d'entrée = nombre
• L'utilisateur entre «4,55» dans le champ de saisie
• Lorsque l'entrée perd le focus, la valeur est tronquée à "4"
• Confus pour l'utilisateur

Windows Phone 8

• Type d'entrée = nombre
• L'utilisateur entre «4,55» dans le champ de saisie
• $("#my_input").val(); renvoie "4,55"
• C'est bien, je peux remplacer la virgule par un point et obtenir un flotteur correct

Quelles sont les «meilleures pratiques» dans ce genre de situations lorsque l'utilisateur peut utiliser une virgule ou un point comme séparateur décimal et que je souhaite conserver le type d'entrée html sous forme de nombre, afin de fournir une meilleure expérience utilisateur?

Puis-je convertir une virgule en point "à la volée", lier les événements clés, fonctionne-t-il avec des entrées numériques?

ÉDITER

Currenlty Je n'ai aucune solution, comment obtenir une valeur flottante (sous forme de chaîne ou de nombre) à partir de l'entrée dont le type est défini sur nombre. Si l'utilisateur final entre «4,55», Chrome renvoie toujours «455», Firefox renvoie «4,55», ce qui est très bien.

De plus, il est assez ennuyeux que dans Android (émulateur 4.2 testé), lorsque j'entre "4,55" dans le champ de saisie et que je change le focus vers un autre endroit, le nombre entré soit tronqué à "4".

Je pense que ce qui manque dans les réponses ci-dessus, c'est la nécessité de spécifier une valeur différente pour l' stepattribut, qui a une valeur par défaut de 1. Si vous souhaitez que l'algorithme de validation de l'entrée autorise les valeurs à virgule flottante, spécifiez une étape en conséquence.

Par exemple, je voulais des montants en dollars, j'ai donc spécifié une étape comme celle-ci:

 <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.">

Il n'y a rien de mal à utiliser jQuery pour récupérer la valeur, mais vous trouverez utile d'utiliser directement l'API DOM pour obtenir la validity.validpropriété des éléments .

J'ai eu un problème similaire avec le point décimal, mais la raison pour laquelle j'ai réalisé qu'il y avait un problème était à cause du style que Twitter Bootstrap ajoute à une entrée numérique avec une valeur invalide.

Voici un violon démontrant que l'ajout de l' stepattribut le fait fonctionner, et testant également si la valeur actuelle est valide:

• jsFiddle

TL; DR: définissez l' stepattribut a sur une valeur à virgule flottante, car il est par défaut 1.

REMARQUE : la virgule ne valide pas pour moi, mais je soupçonne que si je définis les paramètres de langue / région de mon système d'exploitation à un endroit qui utilise une virgule comme séparateur décimal, cela fonctionnerait. * note en note *: ce n'était pas le cas pour les paramètres de langue / clavier du système d'exploitation * Allemand * dans Ubuntu / Gnome 14.04.

Selon w3.org, l' attribut value de l' entrée numérique est défini comme un nombre à virgule flottante . La syntaxe du nombre à virgule flottante semble n'accepter que les points comme séparateurs décimaux.

J'ai répertorié ci-dessous quelques options qui pourraient vous être utiles:

1. Utilisation de l'attribut pattern

Avec l' attribut pattern, vous pouvez spécifier le format autorisé avec une expression régulière d'une manière compatible HTML5. Ici, vous pouvez spécifier que le caractère virgule est autorisé et un message de retour utile si le modèle échoue.

<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."/>

Remarque: la prise en charge de plusieurs navigateurs varie beaucoup. Il peut être complet, partiel ou inexistant.

2. Validation JavaScript

Vous pouvez essayer de lier un simple rappel à, par exemple, l' événement onchange (et / ou flou ) qui remplacerait la virgule ou validerait tous ensemble.

3. Désactivez la validation du navigateur ##

Troisièmement, vous pouvez essayer d'utiliser l' attribut formnovalidate sur les entrées numériques dans le but de désactiver la validation du navigateur pour ce champ dans son ensemble.

<input type="number" formnovalidate />

4. Combinaison ..?

<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."/>

L'utilisation d'une virgule ou d'un point pour le séparateur décimal dépend entièrement du navigateur. Le navigateur prend sa décision en fonction des paramètres régionaux du système d'exploitation ou du navigateur, ou certains navigateurs prennent des indices sur le site Web. J'ai créé un tableau de comparaison des navigateurs montrant comment différents navigateurs prennent en charge différentes méthodes de localisation. Safari étant le seul navigateur à gérer les virgules et les points de manière interchangeable.

Fondamentalement, en tant qu'auteur Web, vous ne pouvez pas vraiment contrôler cela. Certaines solutions de contournement impliquent l'utilisation de deux champs d'entrée avec des entiers. Cela permet à chaque utilisateur de saisir les données comme prévu. Ce n'est pas particulièrement sexy, mais cela fonctionnera dans tous les cas pour tous les utilisateurs.

Utilisez à la valueAsNumberplace de .val().

contribution . valueAsNumber [= valeur]

Renvoie un nombre représentant la valeur du contrôle de formulaire, le cas échéant; sinon, retourne null.
Peut être défini, pour changer la valeur.
Lève une exception INVALID_STATE_ERR si le contrôle n'est ni basé sur la date ou l'heure ni numérique.

utilise un type de texte mais force l'apparence du clavier numérique

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

la balise inputmode est la solution

Je n'ai pas trouvé de solution parfaite mais le mieux que je puisse faire était d'utiliser type = "tel" et de désactiver la validation html5 (formnovalidate):

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

Si l'utilisateur met une virgule, il affichera la virgule dans chaque navigateur moderne que j'ai essayé (dernier FF, IE, bord, opéra, chrome, bureau safari, chrome android).

Le problème principal est:

• Les utilisateurs mobiles verront le clavier de leur téléphone qui peut être différent du clavier numérique.
• Pire encore, le clavier du téléphone peut même ne pas avoir de touche pour une virgule.

Pour mon cas d'utilisation, je n'avais qu'à:

• Afficher la valeur initiale avec une virgule (Firefox la supprime pour type = nombre)
• Ne pas échouer à la validation html5 (s'il y a une virgule)
• Faites lire le champ exactement comme entrée (avec une virgule possible)

Si vous avez une exigence similaire, cela devrait fonctionner pour vous.

Remarque: je n'ai pas aimé le support de l'attribut pattern. Le formnovalidate semble fonctionner beaucoup mieux.

Lorsque vous appelez, $("#my_input").val();il retourne sous forme de variable de chaîne. Alors utilisez parseFloatet parseIntpour convertir. Lorsque vous utilisez parseFloatvotre ordinateur de bureau ou votre téléphone, LUI-MÊME comprend la signification de variable.

Et en plus, vous pouvez convertir un flottant en chaîne en utilisant toFixedqui a un argument le nombre de chiffres comme ci-dessous:

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

Apparemment, les navigateurs ont encore des problèmes (bien que Chrome et Firefox Nightly fonctionnent bien). J'ai une approche hacky pour les personnes qui doivent vraiment utiliser un champ numérique (peut-être à cause des petites flèches que les champs de texte n'ont pas).

Ma solution

J'ai ajouté un keyupgestionnaire d'événements à l'entrée du formulaire, suivi de l'état et défini la valeur une fois qu'elle est à nouveau valide.

Extrait JS pur 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>

Extrait angulaire 9

@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">

Ma recommandation? N'utilisez pas du tout jQuery. J'ai eu le même problème que toi. J'ai trouvé que cela $('#my_input').val()retournait toujours un résultat étrange.

Essayez d'utiliser à la document.getElementById('my_input').valueAsNumberplace de $("#my_input").val();, puis utilisez Number(your_value_retrieved)pour essayer de créer un nombre. Si la valeur est NaN, vous savez certainement que ce n'est pas un nombre.

Une chose à ajouter est que lorsque vous écrivez un nombre sur l'entrée, l'entrée accepte en fait presque tous les caractères (je peux écrire le signe euro, un dollar et tous les autres caractères spéciaux), il est donc préférable de récupérer la valeur en utilisant .valueAsNumberau lieu d'utiliser jQuery.

Oh, et BTW, qui permet à vos utilisateurs d'ajouter l'internationalisation (c'est-à-dire: prendre en charge les virgules au lieu des points pour créer des nombres décimaux). Laissez simplement l' Number()objet créer quelque chose pour vous et il sera sans danger pour les décimales, pour ainsi dire.

On dirait que vous souhaitez utiliser toLocaleString () sur vos entrées numériques.

Voir https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString pour son utilisation.

La localisation des nombres dans JS est également traitée dans Internationalisation (le formatage des nombres "num.toLocaleString ()") ne fonctionne pas pour Chrome