Détecter et récupèrer la string qui est en train d'être tapée

Version imprimable

12/08/2019, 23h10
mohamed lamine 1996

Détecter et récupèrer la string qui est en train d'être tapée

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.

Code:

1
2
 
<div contenteditable="true" id="write_text_here"></div>

Code:

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);
});

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:

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. :  , 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 (?)

13/08/2019, 11h42
mohamed lamine 1996

@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.

OK.

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

Code:

<div contenteditable="true" class="write_text_here"></div>

N.B. j'ai remplacé l'id par class

Code:

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... :koi:

13/08/2019, 15h51
mohamed lamine 1996

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.