Comment trouver le chemin de l’élément (balises) dans lequel se trouve le curseur ?

**Beginner.** · 03/06/2015, 12h05

Salut,

Je crois que c'est difficile mais je pose quand même la question : Comment trouver le chemin de l’élément (balises) dans lequel se trouve le curseur ?

Je m'explique, supposons que j'ai ce source code affiché par exemple dans un textarea ou un élément éditable :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>...</head>
<body>
    <div>...</div>
    <div>...</div>
    <div>
        <h1>Un titre h1...</h1>
        <p>Un paragraphe p0...</p>
        <p>Un deuxième|paragraphe p1...</p>
        <p>Un troisième paragraphe p2...</p>
    </div>
</body>
</html>

et que le curseur texte (en rouge) soit placé à l'intérieur du deuxième paragraphe eh bien j'aimerais obtenir le chemin de cet élément genre comme ceci :

html > body > div[2] > p[1]

Et si possible avoir l'offset (position à l'intérieur de l’élément en nombre de caractères).

C'est peut-être impossible ou du moins difficile mais je pose la question quand même pour voir...

Merci.

**Bovino** · 03/06/2015, 14h10

Il est facile de savoir sur quel élément tu es, à partir de là, utiliser des parentNode() jusqu'à ce qu'on atteigne le haut de l'arborescence est tout aussi simple.
En revanche, connaitre l'offset est plus délicat, il faut manier les objets Range en tenant compte des différences entre IE et les navigateurs.

**Beginner.** · 03/06/2015, 14h37

Merci.

Oui effectivement c'est plus facile si il s'agit d'une page html affichée dans un navigateur, dans ce cas on peut utiliser parentNodes() comme tu dis ou autres propriétés. Ceci dit en faisant cela on n'aura pas les indices, c'est-à-dire on n'aura par exemple ceci : html > body > div > p et non ceci : html > body > div[2] > p[1] or je crois que seul le chemin avec indices correspond à un seul élément alors que celui sans indices peut correspondre à plusieurs éléments.

De toute façon j'ai vu comment on pouvait faire ça lorsque la page html est affichée dans un navigateur mais moi je parlais dans le cas où on a affaire au code source affiché dans un éditeur (par exemple dans un textarea ou un élément éditable).

Dans ce cas c'est plus difficile car on a pas la possibilité d'utiliser parentNodes(), childNodes()...

En fait je crois que ça revient à parser sois-même le code...

**SylvainPV** · 04/06/2015, 10h12

facile avec mouseover/mousemove et e.clientX/Y / e.target : http://jsfiddle.net/t19Lstp7/

**Bovino** · 04/06/2015, 10h25

Sylvain, ta méthode ne permet pas de connaitre le rang de la balise survolée par rapport à son type et son parent.

Il faut remonter d'un cran et lister tous les éléments de même nature :
http://jsfiddle.net/t19Lstp7/1/

**SylvainPV** · 04/06/2015, 12h04

Ça c'était l'étape suivante, mais il faut bien laisser les gens bosser un peu

Comment trouver le chemin de l’élément (balises) dans lequel se trouve le curseur ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager