Discussion :

[Auteur]

Comment remplacer un caractère par un autre lorsque l'utilisateur renseigne un champ texte ?
http://javascript.developpez.com/faq...s#RemplacerCar

• ajout d'un avertissement
• accolades ouvrantes à la ligne

Comment remplacer un caractère par un autre lorsque l'utilisateur renseigne un champ texte ?


Par exemple, si l'on veut remplacer toutes les virgules par un point.
Voici le code de la fonction :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function virgule(texte) 
{
    if (texte.substr(texte.length-1,1) == ",") 
    {
    document.getElementById('champ').value=texte.substr(0,texte.length-1)+ "." ;
    }
}

Et voici le code du champ texte :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" id="champ" onkeyup="virgule(this.value);">

Attention :

• si l'utilisateur laisse le doigt appuyé sur la touche virgule "," seule la dernière virgule (après relâchement de la touche) sera transformée en point ".".
• si une chaîne de caractères contenant des virgules est copiée-collée dans le champ, les virgules ne sont pas transformées en points.

[vermine]

Bien vu pour les avertissements.

[SylvainPV]

Cette méthode ne convient pas du tout, elle ne changera la virgule que s'il s'agit du dernier caractère entré. Si on retourne en arrière dans le champ pour mettre une virgule, elle ne sera pas convertie.

Je propose d'utiliser la méthode String.replace() à la place :

Comment remplacer un caractère par un autre lorsque l'utilisateur renseigne un champ texte ?

Par exemple, si l'on veut remplacer toutes les virgules par un point dans ce champ :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" id="champ">

le code Javascript adéquat est :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
document.getElementById("champ").addEventListener("keyup", function(e){
    var aRemplacer = ',', remplacerPar = '.';    
    var start = this.selectionStart,  end = this.selectionEnd;
    this.value = this.value.replace(new RegExp(aRemplacer,"g"),remplacerPar);
    this.setSelectionRange(start, end); // restaure la position du curseur
});

Test ici : http://jsfiddle.net/v6z7t/
Le setSelectionRange n'est pas supporté partout, mais ça reste mieux que l'ancienne fonction qui ne s'en préoccupait même pas.

[NoSmoking]

Là je suis plus circonspect car pour moi aucune des deux méthodes n'est vraiment actuellement viable.

La méthode proposée par SylvainPV est la plus moderne mais incomplètement supportée encore à ce jour.

J'aurais tendance à préconiser un replace de la virgule par le point, c'est quand même le cas le plus fréquent, sur l'événement onblur du champ de saisie.
En effet pourquoi changer les habitudes de celui/celle qui saisie ou de la configuration de son environnement, la remise en forme s'effectuant sur le onblur m'apparaissant satisfaire tout le monde.

Donc je botte en touche sur celle là

[Auteur]

On peut dire qu'il n'existe pas de solution adaptée à tous les navigateurs ?
Indiquer les défauts de chaque solution et pour la solution de SylvainPV ajouter les navigateurs compatibles ?

[vermine]

Oui il vaut mieux faire ainsi car on ne peut se permettre de laisser croire des choses. Il faut qu'on soit le plus clair possible pour le lecteur.

[vermine]

Quelle serait la formulation finale ?

[Kaamo]

Conserver le comportement sur le keyup mais ne remplacer que si la chaîne comporte une virgule.
http://jsfiddle.net/v6z7t/3/

[vermine]

Merci !


Auteur, résolu ?

[Auteur]

Si cela te convient oui.

[vermine]

Pfiou. J'ai adapté toutes les Q/R sur les formulaires sur la faq de travail.

Je n'ai pas, pour le moment, le temps de relire. Si quelqu'un peut vite jeter un coup d'oeil, ce serait sympa.

[NoSmoking]

après une lecture très rapide

Comment attribuer une valeur à l'attribut name d'un élément créé par un script ?

Pour créer un élément HTML (par exemple un input), nous utilisons la syntaxe suivabte. Ce code fonctionne à partir de IE8 et sur les autres navigateurs :

Pour les versions d'Internet Explorer antérieures à IE8), il faut intégrer l'attribut name dans la méthode createElement(). Pour plus de détails, voir le paragraphe [Obsolète] de cette Q/R.

[vermine]

Parfait, merci.

J'ai pu refaire un passage également mais je n'ai pas encore eu l'occasion de le mettre en ligne. Ca concerne des broutilles (reformulation et mise en forme). De ce côté-là, ça devrait être bon.

J'espère cependant qu'il ne manque pas du contenu. J'ai pu sauter une Q/R sans le vouloir.

J'ai ajouté Auteur sur une Q/R. J'avais oublié de l'inclure malgré sa relecture.

D'ici quelques jours, je mettrai cela en production.

[Auteur]

Comment vérifier la syntaxe d'une date ?
Le style justifié passe mal dans cette Q/R les mots sont séparés par de grands espaces.

Je viens de m'apercevoir que j'ai oublié 3 questions :
Comment accéder aux éléments d'un formulaire ?
Comment lier deux listes déroulantes entre elles ?
Comment ajouter des options dans une liste déroulante à partir d'une autre ?

[vermine]

Oui j'avais vu aussi. J'ai ajouté un passage à la ligne. Faudra que je regarde le résultat.

Pour les questions, il y en a une que tu avais relue. Pour les autres, il faudrait effectivement jeter un coup d'oeil rapide.