Discussion :

[mathieuq1]

Bonjour, j'ai un petit souci - disons que j'ai 3 boites DIV avec chacune un ID (div1,div2,div3). Chaque DIV contient du texte.
Je souhaite identifier de quelle DIV (par son ID) une sélection du texte a été faite (tout ou partie du texte).

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id=div1>ABCDEFGHIJK</div
<div id=div2>747383947373</div
<div id=div3>ksdjfbsqlsnfbflsn</div

j'ai un code, pour commencer, qui est celui-ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
document.onmouseup = document.onkeyup = function() {
        selection = getSelectionText();
}

Je me suis dit "le focus n'est pas forcément sur le DIV lorsque la sélection est faite", mais ce code ne fonctionne pas dans la meme fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$(this).focus(); 
var currentId = $(this).attr('id');

Du coup, je ne sais pas trop comment récupérer l'ID de ma boite DIV

[psychadelic]

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    document.onmouseup = document.onkeyup = function () {
      let ElemSelected = document.getSelection();
 
      console.log(ElemSelected.focusNode.parentElement.id);
    }

Faut utiliser le DEBUGGER de ton navigateur, ce type d'information y est directement présente.

[mathieuq1]

Merci beaucoup ! du coup je me permets d'avancer sur ma question.

Je récupère un "chemin d'accès" de mon élément de ce type:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

span#monId.maClasse

Or, ma classe notamment contient des espaces, comme ci-dessous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

span#texte1.content content-block

Du coup, quand j'essaye de "retrouver" mon texte dans la page, en faisant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var monchemin = monTag+monId+maClasse
console.log($(monchemin).text());

le contenu n'est retrouvé que pour les classes n'ayant pas d'espaces - comment gérer ce point ?

[psychadelic]

tu mélanges JavaScript et Jquery

Si tu as une nouvelle question cela implique un nouveau sujet

et je vais pas me lancer dans un chat de cours sur le JavaScript / jQuery

[Watilin]

J’avais codé ce petit truc avant de voir la réponse de psychadelic :

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
function getSelectionContainerWithId() {
  let sel = window.getSelection();
  if (0 === sel.rangeCount) return null;
 
  let container = sel.getRangeAt(0).commonAncestorContainer;
  if (Node.TEXT_NODE === container.nodeType) {
    container = container.parentElement;
  }
 
  while (container) {
    if (container.id) return container;
    container = container.parentElement;
  }
 
  return null;
}

Et parce que ça ne coûte pas grand chose, voici un lien vers la doc.

[Beginner.]

Salut,

Des réponses ont été données mais je voulais faire une remarque : le texte sélectionné pourrait très bien être à cheval sur plusieurs div alors dans ce cas il faut savoir ce que tu veux, le parent commun des deux extrémités de la sélection ? Le parent de la première extrémité de la sélection ? Le parent de la seconde extrémité de la sélection ?

Mais d’après l'autre fil de discussion je crois que tu veux en fait juste identifier l’élément survolé par le curseur souris, non ? Dans ce cas utiliser event.target est plus simple, non ???

Or, ma classe notamment contient des espaces, comme ci-dessous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

span#texte1.content content-block

Si il y a des espaces c'est qu'en fait il y a plusieurs classes et je pense que pour le sélecteur il faut utiliser le point devant chaque classe... Il faudrait t'arranger pour obtenir ça : span#texte1.content.content-block ce qui n'est pas très difficile, dans l'autre fil on avait cité className et c'est faisable avec mais tu peux aussi utiliser directement classList...