Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2016
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : Guinée

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2016
    Messages : 36
    Points : 26
    Points
    26

    Par défaut detecter et recuperer le string qui est en train d'être tapé.

    J'utilise ce div: <div contenteditable="true" id='write_text_here'></div>.

    Comment je pourrais détecter si l'utilisateur tape un caractère et récupérer le mot que l'utilisateur est entrain de taper.

    Je ne veux pas le texte entier de ce div mais le mot qui est entrain d'être tapé par l'utilisateur.

    Comment récupérer le string qui est entrain d'être tapé ?

    Merci.

  2. #2
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 013
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 013
    Points : 1 651
    Points
    1 651

    Par défaut

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <div contenteditable="true" id="write_text_here"></div>

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    $("#write_text_here").keypress(e=>{
    let char=String.fromCharCode(e.keyCode);
    /* ou bien avec which : String.fromCharCode(e.which); */
    console.log("char :",char);
    });

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 031
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 031
    Points : 30 625
    Points
    30 625

    Par défaut

    Bonjour,

    Le code de Toufik83 affiche le dernier caractère tapé.

    Pour le "dernier mot", c'est un peu plus compliqué... (à cause des ponctuations, passages à la ligne, espaces multiples, balises HTML générées automatiquement...)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $('#write_text_here').on('keyup', function(){
      let mots = $(this).html().replace(/(<[^>]*>)|(&[^;]*;)|[^a-z0-9]/gi, ' ').split(' ');
      mots = mots.filter( function(val){return val !== ''} );
      //console.log( mots );
      let mot = mots[mots.length-1];
      console.log("dernier mot :",mot);
    });
    • .html() : on récupère les balises HTML (pour les sauts de ligne)
    • (regex) on transforme en espace :
      • (<[^>]*>) : balises HTML (générées automatiquement, dont <br>)
      • (&[^;]* : caractères spéciaux HTML transformés en espace (ex. : &nbsp;, quand on tape plusieurs fois la barre d'espace)
      • [^a-z0-9] : tout ce qui n'est pas alphanumérique (. , ; ...)
    • .split(' ') : on sépare les mots
    • .filter(...) : on supprime les cases "vides" de l'array


    Voir : https://codepen.io/jreaux62/pen/rNBOXjp

    N.B. Il y a certainement plus simple (?)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #4
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2016
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : Guinée

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2016
    Messages : 36
    Points : 26
    Points
    26

    Par défaut

    @jreaux62
    je ne veux pas recuperer le dernier mot mais le mot qui est encours d'être tapé, c'est à dire le mot qui est entrain d'être ecrit.
    Imaginons si apres avoir tapé quelques mots, l'utilisateur se retournait au debut du div pour tapé un nouvel mot, ton code ne va plus macher.

    Tu me comprends un peu ?

    Merci.

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 031
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 031
    Points : 30 625
    Points
    30 625

    Par défaut

    OK.

    Après quelques recherches et beaucoup de "bricolages" : https://codepen.io/jreaux62/pen/rNBOXjp

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
     <div contenteditable="true" class="write_text_here"></div>
    N.B. j'ai remplacé l'id par class
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    // ----------------------------
    // Récupérer le mot EN COURS DE FRAPPE
    $('.write_text_here').on('keyup', function(e){
      // mot en cours de frappe
      let CaretPos = caretPositionIndex();
      //console.log("CaretPos :",CaretPos);
     
      let mots = $(this).html().replace(/(<[^>]*>)/gi, ' ').split(' '); // supprime les balises HTML
      mots = mots.filter( function(val){return val !== ''} );
      let mots_i = mots.length;
      //console.log( mots );
      let txt_lg = 0;
      let mot_current = '';
      let i=0;
      while( txt_lg < CaretPos )
      {
        txt_lg += mots[i].length + 1; // 1 = espace
        if( mots.indexOf(i+1)!=-1 && (txt_lg + mots[i+1].length + 1) > CaretPos)
        {
          mot_current = mots[i-1];
        } else {
          mot_current = mots[i];
        }
        i++;
      }
      // on supprime les caracteres speciaux (&nbsp;) et non-alphanumériques
      mot_current = mot_current.replace(/(&[^;]*;)|[^a-z0-9]/gi, '');
     
      //console.log("mot en cours de frappe :",mot_current);
      $('#motencours').text(mot_current);
    });
     
    // ----------------------------
    // Position/index du curseur
    // source : https://codepen.io/alockwood05/pen/vMpdmZ
    function caretPositionIndex() 
    {
      const range = window.getSelection().getRangeAt(0);
      const { endContainer, endOffset } = range;
     
      // get contenteditableDiv from our endContainer node
      let contenteditableDiv;
      const contenteditableSelector = "div[contenteditable]";
      switch (endContainer.nodeType) {
        case Node.TEXT_NODE:
          contenteditableDiv = endContainer.parentElement.closest(contenteditableSelector);
          break;
        case Node.ELEMENT_NODE:
          contenteditableDiv = endContainer.closest(contenteditableSelector);
          break;
      }
     
      if (!contenteditableDiv) return '';
     
      const countBeforeEnd = countUntilEndContainer(contenteditableDiv, endContainer);
      if (countBeforeEnd.error ) return null;
      return countBeforeEnd.count + endOffset;
     
      function countUntilEndContainer(
      parent,
       endNode,
       countingState = {count: 0}
      ) {
        for (let node of parent.childNodes) {
          if (countingState.done) break;
          if (node === endNode) {
            countingState.done = true;
            return countingState;
          }
          if (node.nodeType === Node.TEXT_NODE) {
            countingState.count += node.length;
          } else if (node.nodeType === Node.ELEMENT_NODE) {
            countUntilEndContainer(node, endNode, countingState);
          } else {
            countingState.error = true;
          }
        }
        return countingState;
      }
    }
    // ----------------------------
    N.B. Mais ce n'est pas encore ça...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2016
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : Guinée

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2016
    Messages : 36
    Points : 26
    Points
    26

    Par défaut

    Ton code melange encore un peu mais c'est un bon depart.

    C'est du javascript approfondi et plus complexe que je ne le croyais.
    J'espère que tu pourras m'aider parceque sincèrement je suis loin de bien connaitre javascript.

    Merci.

Discussions similaires

  1. Réponses: 0
    Dernier message: 14/11/2014, 16h38
  2. Réponses: 2
    Dernier message: 28/07/2009, 16h24
  3. recupere une clé qui est incremente automatique
    Par lenetfm dans le forum Langage SQL
    Réponses: 12
    Dernier message: 17/04/2009, 16h12
  4. recuperer un bean qui est utilisé par plusieurs jsp
    Par morgo1980 dans le forum Struts 1
    Réponses: 2
    Dernier message: 14/06/2007, 19h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo