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.