Discussion :

[mohamed lamine 1996]

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.

[Toufik83]

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

[Invité]

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 (?)

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

[Invité]

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

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