Séparateur décimal dans un <input>

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
FRAUBRJ
Messages : 3
Enregistré le : 10 janv. 2020, 17:18

Séparateur décimal dans un <input>

Message par FRAUBRJ » 10 janv. 2020, 18:04

Bonjour,

Je suis entrain de réaliser, sur une tablette androïde, l'interface utilisateur d'un appareil de mesure. Je rencontre un problème d'affichage du séparateur décimal d'un champ de saisie <input> pour une valeur numérique.Je veux que dans tous les cas de figure ce soit un 'point' et pas une 'virgule'

Le HTML et le CSS correspondant

Code : Tout sélectionner

<html lang="en" xml:lang="en">
<head>
  <meta charset="utf-8" />
  ....
</head>

<body ontouchstart="">

	<div id="conteneurDC">
		<label for="DC">DC:</label>
		<input type="number" name="DC" id="DC" placeholder="0.0" step="0.01" min="0.0" max="5.0"/>
		<label for="V">V</label>
		<button id="sendDC" onclick="app.sendDC()">OK</button>
	</div>
	.....
</body>
</html>


#conteneurDC{
	display: flex;
	font-size: 50%;
	justify-content: space-around;
}
Le JS qui décode un message reçu (par Bluetooth), par example "0.50", et qui le met comme nouvelle valeur du <input>

Code : Tout sélectionner

valueString = "0.50"; // c'est l'exemple
document.getElementById('DC').value = valueString;
Dans le champ de saisie s'affiche "0,50" et pas "0.50" !!!
J'ai besoin de votre aide pour trouver une solution!

Jean-Jacques

PS
J'ai oublié de préciser que le clavier virtuel qui apparait pour saisir une valeur dans le champ du <input> n'a que le 'point' comme séparateur décimal!

Avatar du membre
webmaster
Administrateur du site
Messages : 126
Enregistré le : 28 févr. 2017, 15:19

Re: Séparateur décimal dans un <input>

Message par webmaster » 11 janv. 2020, 13:06

Bonjour,

Le format décimal doit être fixé par le système d'exploitation (android ici), en particulier sur les zones de saisie.

Il est possible de formater un nombre comme on le veut avec avec l'objet numberFormat, mais je ne pense pas que cela concerne les input
https://www.toutjavascript.com/referenc ... format.php
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

FRAUBRJ
Messages : 3
Enregistré le : 10 janv. 2020, 17:18

Re: Séparateur décimal dans un <input>

Message par FRAUBRJ » 11 janv. 2020, 16:34

Bonjour, et merci pour ta réponse.

J'ai donc fait cela

Code : Tout sélectionner

var lavalue = new Intl.NumberFormat("en-US", {maximumFractionDigits: 3});
document.getElementById('DC').value = lavalue.format("0.50");
Mais ca me met toujours "0,50" dans le champ de saisie de l'input!

Le plus drôle (!!) c'est que la saisie directe dans le champ (avec le clavier virtuel) n'est bien possible qu'avec le point comme séparateur.
Pourtant la langue utilisée par la tablette est bien le français.
Si j'essaie de mettre "0,50" ça ne va pas car ce n'est pas considéré comme un nombre!
Si je met

Code : Tout sélectionner

<input type="number" name="DC" id="DC" placeholder="0,0" step="0,001" min="0,0" max="5,0" />
rien ne va plus!

Dans le flou le plus complet...

PS
La solution qui marche est de changer la langue de la tablette, mais bof!
Une autre piste serait d'avoir un input de type texte avec comme seuls caractères autorisés les nombres de 0 à 9 et le point (avec un regex, mais je ne sais pas faire!) et un contrôle de validité globale avec JS.

FRAUBRJ
Messages : 3
Enregistré le : 10 janv. 2020, 17:18

Re: Séparateur décimal dans un <input>

Message par FRAUBRJ » 12 janv. 2020, 17:47

Finalement une solution qui fonctionne est bien de faire une saisie avec un type "text" et un contrôle de saisie avec un "pattern" et une fonction JS

Dans le HTML

Code : Tout sélectionner

	<div id="conteneurDC">
			<label class="element" for="DC">DC:</label>
			<input class="element" type="text" name="DC" id="DC" placeholder="0.0" pattern="[0-9\.]{2,5}" onfocus="this.value=''"/>
			<label class="element" for="V">V</label>
			<button class="element" id="sendDC" onclick="app.sendDC()">OK</button>
	</div>
	<script>
			document.getElementById("DC").addEventListener('input', app.checkValueDC);
	</script>
et dans le Javascript

Code : Tout sélectionner


var app = {

	.............
	
	checkValueDC: function() {
		theValue = parseFloat(document.getElementById("DC").value);
		if (theValue > 5.0) // c'est la valeur maximale
		{
			document.getElementById("DC").value = ''"; // remise à '0.0' du champ de saisie
		}			
	},
	
	.......
C'est pas aussi efficace mais ça fonctionne!

Avatar du membre
webmaster
Administrateur du site
Messages : 126
Enregistré le : 28 févr. 2017, 15:19

Re: Séparateur décimal dans un <input>

Message par webmaster » 13 janv. 2020, 11:23

Interessant.

En fait, tout est souvent possible, mais au prix d'une gestion complexe souvent.

C'est vrai que la question du formatage des nombres est délicate. On voit souvent dans la presse des montants avec séparateurs de milliers en ,
Genre 20,500 pour 20 500. Ce qui fait que beaucoup comprennent 20,5 finalement.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre