Sujet Précédent Sujet Suivant

Remplacer du text existant à la volée

FlaviusVII Messages postés 3 Date d'inscription mardi 16 novembre 2010 Statut Membre Dernière intervention 13 avril 2012 - 5 avril 2012 à 09:57
FlaviusVII Messages postés 3 Date d'inscription mardi 16 novembre 2010 Statut Membre Dernière intervention 13 avril 2012 - 13 avril 2012 à 11:53
Bonjour,

J'ai besoin de transformer un chaine de texte par le contenu d'un input et ce lettre par lettre.
Pour être plus clair, voici mon code : 


var input = document.getElementById('nom'),
chevron = document.getElementById('chevron').innerHTML,
contenu="";

input.addEventListener("keypress",affiche,false);


function affiche(ck){

   var txt = String.fromCharCode(ck.charCode);
   contenu = contenu += txt;
   var rplc = chevron.replace("<",txt);
   chevron = rplc;
   alert(chevron);
}




<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   </head>
   
      <form action="#" method="GET">
         <fieldset>
         
         </fieldset>
         <<<<<<<<<<


      </form>
      <script type="text/javascript" src="js/chevron.js"></script>
      </script>-->
      
</html>


Le but du jeu c'est que chaque lettre tapé dans l'input remplace un chevron.
Avec mon code, lorsque je tape une lettre, l'alert se lance et je vois bien que la lettre tapé à remplacé le chevron mais ce n'est pas effectif dans la page HTML.

Pourquoi ?

Ô âmes généreuses, aidez moi !!

4 réponses

Réponse 1 / 4
cs_jopop Messages postés 1540 Date d'inscription lundi 26 mai 2003 Statut Membre Dernière intervention 1 août 2013 12
6 avril 2012 à 12:00
Salut,

à aucun moment tu n'assignes de nouvelle valeur au InnerHtml de ton tag, normal que ça change pas au niveau de l'affichage. Et aussi j'ai un petit doute sur la ligne suivante : 
contenu = contenu += txt;
0
Réponse 2 / 4
FlaviusVII Messages postés 3 Date d'inscription mardi 16 novembre 2010 Statut Membre Dernière intervention 13 avril 2012
10 avril 2012 à 10:21
Bonjour,

Désolée pour cettre réponse tardive.

En faite j'ai totalement changé de méthode, j'ai créer un tableau rempli de chevron que j'affiche via javascript et dont le contenu est remplacer à chaque keypress. 

var input = document.getElementById('nom'),
chevron = document.getElementById('chevron'),
n = -1,
tab = new Array("<","<","<","<","<","<","<","<","<","<","<","<","12");


if (document.addEventListener){
   input.addEventListener('keypress', affiche, false); 
} else if (document.attachEvent){
   input.attachEvent('onkeypress', affiche);
}


function affiche(ck){
   n++;
   if(n+1<= tab.length)
   {
        switch(ck.keycode || ck.charCode){
            
            case 8:
               n = n-1;
               tab[n] = "<";
               chevron.innerHTML = tab.join("");
               break;
            case 9:
               tab[n] = "<";
               chevron.innerHTML = tab.join("");
               break;
            case 13:
               tab[n] = "<";
               chevron.innerHTML = tab.join("");
               break;
            case 32:
               tab[n] = "<";
               chevron.innerHTML = tab.join("");
               break;
            case 39:
               tab[n] = "<";
               chevron.innerHTML = tab.join("");
               break;
            case 45:
               tab[n] = "<";
               chevron.innerHTML = tab.join("");
               break;
            case 94:
               tab[n] = "<";
               chevron.innerHTML = tab.join("");
               break;
            case 224:
               tab[n] = "a";
               chevron.innerHTML = tab.join("");
               break;
            case 231:
               tab[n] = "c";
               chevron.innerHTML = tab.join("");
               break;
            case 232:
               tab[n] = "e";
               chevron.innerHTML = tab.join("");
               break;
            case 233:
               tab[n] = "e";
               chevron.innerHTML = tab.join("");
               break;
            case 249:
               tab[n] = "u";
               chevron.innerHTML = tab.join("");
               break;
            
            default:
               tab[n] = String.fromCharCode(ck.charCode);
               chevron.innerHTML = tab.join("");
               break;
         }
   }
   else
   {
      ck = NULL;
   }
}


chevron.innerHTML = tab.join("");


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Test chevron</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   </head>
   
      <form action="#" method="GET">
         <fieldset>
         
         </fieldset>
         


      </form>
      <script type="text/javascript" src="js/chevron.js"></script>
      
      
</html>


Du coup ça fonctionne.. sur Firefox, car sur IE et opéra c'est la catastrophe, en appyant sur une touuche c'est tous mes chevrons qui disparaissent !!!
Chrome ne fait pas tout ce que je lui demande de faire. Par exemple, il ne remplace par les espaces par des chevrons, il met des "é" alors que je demande de transformer les "é" en "e".

En faite même sur FF j'ai des problèmes, lorsque j'appuie sur la touche entrée, il me supprime un chevron alors que je lui demande de transformer "entrée"(code 13) en chevron.
Bref.. c'est la galère et je ne comprends pas pourquoi il y a une telle différence d'interprétation en chaque navigateur.

Sinon quel est le problème avec 
contenu = contenu += txt;

Ce n'est pas une bonne pratique ?
0
Réponse 3 / 4
cs_jopop Messages postés 1540 Date d'inscription lundi 26 mai 2003 Statut Membre Dernière intervention 1 août 2013 12
10 avril 2012 à 11:52
Re,

* pour la ligne de code :

cette assignation : 
	contenu += contenu;

équivaut à : 
	contenu = contenu + text;

en gros tu écris donc : 
	contenu contenu  contenu + text;


Tu vois un peu l'inutilité de la chose ;)

* pour le reste du problème :

Voilà un petit bout de code qui fait le gros du taff, testé sur IE9 et CH18 : 
		
<<<<<


<script type ="text/javascript">
function doReplace(event) {
var bp = document.getElementById("txt");
bp.innerHTML = bp.innerHTML.replace("<", String.fromCharCode(event.keyCode));
}
</script>


Bonne continuation
0
Réponse 4 / 4
FlaviusVII Messages postés 3 Date d'inscription mardi 16 novembre 2010 Statut Membre Dernière intervention 13 avril 2012
13 avril 2012 à 11:53
Bonjour,

Je te remercie pour tes précisions.
Le code sur IE et opéra.

En faite c'est juste une histoire de keyCode pour l'un et de charCode pour l'autre.

Mais une nouvelle problématique arrive, je veux gérer le retour en arrière : 

      
      <<<<<<



      <script type="text/javascript">
         var input = document.getElementById('input');
       
         if (document.addEventListener){ //Tout les navigateurs
            input.addEventListener('keypress', doReplace, false);
          
         } else if (document.attachEvent){ //IE
            input.attachEvent('onkeypress', doReplace);
         }
      
         function doReplace(event) {
            var bp = document.getElementById("txt");
            var ck = String.fromCharCode(event.keyCode);
            var ff = String.fromCharCode(event.charCode);
            
            
            switch(event.keyCode || event.charCode){
              
               case 8:
                  var premierChevron = bp.innerHTML.indexOf("<");
                  var dernierChar = bp.innerHTML.charAt(premierChevron-1);
                  bp.innerHTML = bp.innerHTML.replace(dernierChar, "<");
                  break;
               
               default:
                  if(navigator.appName!="Netscape")
                     bp.innerHTML = bp.innerHTML.replace("<", ck);
                  else
                     bp.innerHTML = bp.innerHTML.replace("<", ff);
                  
                  break;
            }
         }
      </script>


A tester sur FF et opéra (ca ne marche pas avec les autre navigateur, il faut un keyup ou autre).
Ca fonctionne mais si il rencontre une lettre qui existe déjà,
exemple : firefox<< // içi le f;
Lors du retour en arrière je vais me retrouver avec ça une fois arrivé au f de fox :
tab.length && ck.keyCode=8 || ck.charCode==8){
n=n-2;
}
}
chevron.innerHTML = tab.join("");
</code>

Lorsque ma chaine de chevron à entièrement été remplacé par du texte
exemple : firefox
et que j'appuie sur retour pour modifier le texte je me retrouve avec ça :
exemple : <<<<<<x

Existe t-il une solution miracle pour m'aider ?
Ou bien la solution est-elle sous mon nez depuis tout ce temps mais je ne la vois pas ?
0

Discussions similaires

Comment remplacer un caractere par un autre dans une chaine de caractere ?
bigbang -
cs_ShayW -

9 réponses
remplacer les caracteres sepciaux par espace
cs_farouha -
us_30 -

7 réponses
SQLServer remplacer Null par 0
BasicInstinct -
BasicInstinct -

2 réponses
comment remplacer des caracteres speciaux dans une chaine
a751293 -
a751293 -

2 réponses
declaration existante dans la portée en cours
geoslim -
ucfoutu -

9 réponses
Rejoignez-nous