18041 sujets

Questions générales et questions de débutants

Changer dynamiquement la un caractère dans un input en jquery

Bonjour,

J'ai un champ prix et j'ai besoin de changer automatiquement une "virgule" en "point" si la personne tape une virgule. On m'a dit que l'on pouvais le faire avec une écouteur en jquery.

Sachant que j'ai un REGEX obligatoire qui demande de mettre 00.00, d'où ma question si quelqu'un met une virgule à la place du point.

Merci par avance pour vos réponses,
Bonjour,
Pour changer les virgules en points, tu pourrais faire comme ceci:
<input type="text" id="txt1">
<input type="text" id="txt2">
<input type="text" id="txt3">
<input type="text" id="txt4">
$(function(){
  $('input').on("keyup", function(){
    var inp_val = $(this).val();
    if (inp_val.indexOf(',') != -1) {
      var cut = inp_val.split(",");
      $(this).val(cut.join('.'));
    }
  });
});

http://codepen.io/anon/pen/pNYNmW
Modifié par loicbcn (20 Dec 2016 - 17:05)
hlcgperso a écrit :
Bonjour,
J'ai un champ prix et j'ai besoin de changer automatiquement une "virgule" en "point" si la personne tape une virgule. On m'a dit que l'on pouvais le faire avec une écouteur en jquery.
Sachant que j'ai un REGEX obligatoire qui demande de mettre 00.00, d'où ma question si quelqu'un met une virgule à la place du point.
Merci par avance pour vos réponses,

Moi pas connaître JQuery, donc voici une petite fonction « à l'ancienne » pour modifier chaque champ texte :
<!DOCTYPE html>
<head>
	<meta charset="utf-8"/>
	<title>Démo</title>
	<script>
	function refresh(field)
	{
 	field.value = field.value.replace(".",",");
	} 
	</script>
	<style type="text/css">
	input[type=text] 
	{
	border:1px solid #000; 
	}
	</style>
</head>
<body>
	<input type="text" id="txt1" onblur="refresh(this)">
	<input type="text" id="txt2" onblur="refresh(this)">
	<input type="text" id="txt3" onblur="refresh(this)">
	<input type="text" id="txt4" onblur="refresh(this)">
</body>
</html>

Si on voulait être puriste, il faudrait tout d'abord s'assurer que la valeur récupérée est non nulle / non assignée, avant de lui appliquer la transformation.
Là on va au plus court.
Ton expression régulière garantit par ailleurs qu'il n'y aura qu'un seul caractère de séparation.
Je vous remercie beaucoup pour vos réponses.
je m'excuse de n'avoir pas pu revenir plus tôt...

Le sujet à un peut changé :
Malgré que notre client nous a imposé un regex de type 00.00, il me dit que si on ne met pas de point, ni de virgule on se retrouve avec le message d'erreur du champ. Ce qui est normal vu la restriction demandé au départ. Du coup, je me demande : est-il possible de contraindre la personne à remplir le champ avec "01.00" si il ne tape que le "1" dans le champ ?

Est-ce que les exemples que vous m'avez donné pourrait m'aider par rapport à cette spécificité ?
Cela se rapproche-t-il des "masques" ?

Je vous remercie par avance pour vos réponses Smiley smile
Modifié par hlcgperso (21 Dec 2016 - 18:46)
Bonjour.

hlcgperso a écrit :
Du coup, je me demande : est-il possible de contraindre la personne à remplir le champ avec "01.00" si il ne tape que le "1" dans le champ ?

Pas très sympa pour l'utilisateur, ça... Smiley sweatdrop
Pourquoi ne pas transformer "1" en "01.00" à la perte du focus ou à l'envoi du formulaire ?

Edit : Ah, oui, la regex... Elle est un peu rude quand même... surtout si on considère qu'il s'agit d'un prix...

Smiley smile
Modifié par Zelena (21 Dec 2016 - 20:01)
Je pense que l'évènement JS le plus approprié serait change mais je pense surtout qu'imposer de telles contraintes à l'utilisateur n'est pas très bon.
Tu peux être plus large côté client et vérifier seulement qu'il s'agit d'une valeur numérique, puis faire tous les ajustements côté serveur (ce n'est pas à l'utilisateur de se soucier du formatage de données).

Côté serveur, tu peux très facilement avoir ce que tu souhaites pour peu que la valeur soit numérique (ce qui devient donc la seule contrainte):

str_replace('.', ',', sprintf('%05.2f', $value));

où $value est la valeur saisie par l'utilisateur.

Tu peux aussi passer par money_format pour un truc plus spécifique.
Ce n'est pas un comportement natif.
Tout comme le fait de vouloir que l'utilisateur saisisse quelque chose du type 00.00.
Pour personnaliser ces interactions avec l'utilisateur, il faut donc passer par javascript.

Dans l'exemple que je t'ai passé, il s'agit en effet d'un plugin pour jquery ... Mais ce n'est que du javascript.

En ce qui concerne ce que tu souhaites faire, le test à effectuer n'est pas si ardu que ça.
Tu souhaites avoir en fin de saisi 5 caractères: 2 chiffres de part et d'autres d'un point.

Après, le côté complexe, c'est de compléter à la place de l'utilisateur une saisie partielle (1 ou 1.2), erronnée ("1,1", "6,") voire fantaisiste ("321 partez"). Pour cela, les masques semblent appropriés.

Le plus simple serait de juste valider la saisie au onchange en précisant dans le label du champ le format souhaité.
Modifié par loicbcn (22 Dec 2016 - 10:48)
Sujet clos
Aller à