Positionner le curseur dans un div éditable

Version imprimable

30/12/2014, 15h58
Clément.7

Positionner le curseur dans un div éditable

Bonjour à tous ! J'ai un gros problème

Nouveau problème : le curseur "ne veux pas" se positionner au début d'une ligne.

Si, avec le clavier, je positionne le curseur sur le début d'une ligne (avant le premier caractère de la ligne), il retourne au début du texte, ou à la fin de la ligne précédente si celle-ci comporte du texte.

Si je vais au début d'une ligne (par exemple quant il y a 5 lignes vides puis du texte), parfois le curseur se positionne au début de la première ligne contenant du texte, parfois il revient au début.

Quelqu'un sait-il pourquoi et a-t-il une solution ?

Merci d'avance !

Merci d'avance à ceux qui pourraient faire avancer la résolution de mon problème !
30/12/2014, 17h07
vandenn3

Informations pour les futurs lecteurs:

Citation:

Nouveau problème : le curseur "ne veux pas" se positionner au début d'une ligne.

Si, avec le clavier, je positionne le curseur sur le début d'une ligne (avant le premier caractère de la ligne), il retourne au début du texte, ou à la fin de la ligne précédente si celle-ci comporte du texte.

Si je vais au début d'une ligne (par exemple quant il y a 5 lignes vides puis du texte), parfois le curseur se positionne au début de la première ligne contenant du texte, parfois il revient au début.

Quelqu'un sait-il pourquoi et a-t-il une solution ?

Merci d'avance !

lien de l'essai: http://jsfiddle.net/fax1vznu/1/

Salut,
Je ne comprend pas de problème, le code que tu a donné semble fonctionner
que dois-je faire (écrire quoi, mettre mon curseur où, sélectionner quoi)
pour qu'un bug survienne ?
30/12/2014, 18h56
Clément.7

Désolé...

Il suffit d'aller sur cette page : http://jsfiddle.net/fax1vznu/1/

De saisir du texte et d'appuyer sur la touche ENTRÉE : Le curseur va revenir à la première ligne

Et désolé si je n'ai pas été assez clair...
J'utilise un div possédant l'attribut contenteditable (<div contenteditable="true">) et à chaque fois que l'utilisateur appuie sur une touche, une fonction est exécutée : elle remplace le texte par du HTML en lui faisant subir quelques modifications (ici, ça colore "lol" en bleu).
Or, le curseur bug : Lorsque l'on place le curseur avec les touches fléchées sur le début d'une ligne (vide), le curseur se déplace à une autre position (parfois la ligne au-dessus, parfois le premier caractère du div, parfois la fin de la ligne précédente, etc.)
Et je n'arrive pas à corriger ce comportement.

Quelqu'un saurait-il m'aider ?
30/12/2014, 20h04
vandenn3

Heu, moi rien de spécial ne se passe. j'écris "bonjour", j'appuye sur enter, et mon curseur va naturellement à la ligne.

C'est quoi la variable rangy? elle n'est définie nul part dans le code, si?
30/12/2014, 21h02
Clément.7

Bizarre...

Bizarre... Moi quand je tape "bonjour" et que j'appuie sur la touche entrée mon curseur va à la ligne puis en moins d'une demi-seconde se déplace au tout début du div...
Quel navigateur et quelle version de ton navigateur utilises-tu ? (ex: Chrome 27)

EDIT : Ah oui c'est normal firefox fait une erreur pour ça car il ne connaît pas la propriété "innerText". J'ai donc corrigé mon code : http://jsfiddle.net/fax1vznu/3/

EDIT 2 : Et sur mon smartphone sous Chrome c'est encore plus bizarre quand je tape "lol" ça me rajoute des caractères c'est bizarre :?

En tout cas merci pour vos réponses très rapides j'ai pas souvent l'occasion de voir un sujet avec des réponses aussi rapides sur les autres forums. :D
30/12/2014, 21h27
vandenn3

J'utilise firefox 34.

Dans ton code, à un moment tu supprime les balises html du contenu: (tu le fait même à 2 endrois je crois)
el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/ig,"");
or, les retours à la lignes dans un div (même s'il est contenteditable) sont des <br>
donc les brs sont supprimés, le div à une longueur trop petite pour la fonction rangy, elle (ou ton code je n'ai pas tout regardé) défini donc la position à 0.
30/12/2014, 22h08
Clément.7

Ah oui cette commande fait partie de la fonction "formatText" que je n'utilises plus dans mon code, j'avais oublié de l'enlever désolé (j'ai dû mettre à jour ce code plusieurs fois déjà et ça m'a échappé)
Donc j'enlève cette fonction : http://jsfiddle.net/fax1vznu/4/.

EDIT : Ah oui en effet c'est bizarre... -> corrigé http://jsfiddle.net/fax1vznu/5/ mais le curseur bug toujours. Au moins vous pourrez voir quel est le bug (le bug lui-même buggait avant que je ne corrige le code :mrgreen:)
30/12/2014, 22h37
vandenn3

visiblement la fonction saveSelection ne prend pas en compte les <br>...
30/12/2014, 22h44
Clément.7

Si car si on tape "function() {
salut
}" dans le champ et qu'on place le curseur avec la souris sur "salut" puis qu'on écrit (ex: "function() {
salut !
}" le curseur reste bien sur la 2ème ligne, donc le <br> sont pris en compte...

Je ne comprends vraiment pas d'où peut bien venir le problème...
30/12/2014, 22h59
vandenn3

Si j'écris "salut", puis 3 fois enter, puis "salut" (en copiant collant le texte dedans vu que les enter marchent pas trop), que je met mon curseur à la fin du 2ème "salut", dans la fonction window.color, la valeur start de la sélection vaut 10 (2fois la longueur de "salut").
Ce qui veut dire que tu peux mettre tant de <br> que tu veux, ils ne serons pas considérés comme des caractères.

Une division éditable n'est pas un "textarea", je ne pense pas que l'on puisse manipuler son contenu de la même manière.

De plus, son contenu est parfois surprenant, j'ai testé uniquement sous Chrome 39 avec les codes suivants :

Code:

<div id="editor" contenteditable></div>
Code:

1 2 3 4 5 6 7 $( function(){ // forme abrégée de $(document).ready(function( $( "#editor" ).on( "keyup", function( event ){ console.clear(); console.log( $( this ).html(), "\n", $( this ).text() ); }); });
Lorsque je tape "Hello" suivit d'une frappe sur la touche "Enter", on passe à la ligne avec un décalage d'un caractère. J'obtiens dans la console :
Console was cleared dvp1.html:28 
Hello<div><br></div> 
Hello
Avec plusieurs retours à la ligne :
Console was cleared dvp1.html:28 
Hello<div>Comment ?</div><div>Pourquoi ?</div><div>Étrange !</div><div><br></div> 
HelloComment ?Pourquoi ?Étrange !
Alors que j'attendais :
<div>Hello</div><div>Comment ?</div><div>Pourquoi ?</div><div>Étrange !</div><div><br></div>
Si je réinitialise, et que je commence par un retour à la ligne avant de taper mon texte, j'obtiens le résultat espéré.

Si je modifie mon code HTML, j'obtiens aussi le résultat espéré, mais l'utilisateur peut effacer et alors on retombe dans le même problème.
Code:

1 2 3 <div id="editor" contenteditable> <div><br></div> </div>
Un bogue de Chrome ? Je ne sais pas.

31/12/2014, 10h49
Golgotha

Après plusieurs test, rangy à l'air de merdouiller si tu essaye de sauvegarder ton curseur sur une ligne vide.

Dailleur normalement, c'est pour sauvegarder une sélection, et non la position du curseur.

Dirige toi vers une autre lib.
31/12/2014, 11h36
Clément.7

OK Merci

Je vais essayer de me diriger vers une autre bibliothèque...
J'édite ce message dès que j'en ai trouvé (ou pas) une qui réponds à mes besoins

Merci de votre aide :D

Pourtant c'est bizarre... sur les tests de Rangy tout marche très bien même les lignes vides (http://rangy.googlecode.com/svn/trun...textrange.html)...
04/01/2015, 10h26
Clément.7

Étrange, d'après ce sujet (http://stackoverflow.com/questions/6...ter-dom-change) il semblerait que le module save/restore de Rangy fonctionne parfaitement pour ce type de problème, or ce n'est pas mon cas....

Quelqu'un a une idée sur le sujet ?
07/01/2015, 18h12
Clément.7

Zut...

Je n'ai rien trouvé comme programme/script/bibliothèque me permettant de faire cela !
Quelqu'un connaîtrait-il une solution ?

Si on travaille avec des navigateurs non obsolètes, uniquement sur l'événement "keypress" et avec document.execCommand() il est assez facile d'insérer du texte ou du HTML à l'endroit voulu.

Code:

<div id="divEditable" contentEditable></div>

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
var editableEl = document.getElementById("divEditable");
 
editableEl.addEventListener("keypress", function(e) {
    var charTyped = String.fromCharCode(e.which);
 
    if (charTyped == "{" || charTyped == "(") { // ajout de "{}" ou "()"
        e.preventDefault();
 
        var sel = window.getSelection();
 
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
 
            range.deleteContents();
 
            var text = (charTyped == "{") ? "{}" : "()";
            var textNode = document.createTextNode(text);
 
            range.insertNode(textNode);
 
            range.setStart(textNode, 1);
            range.setEnd(textNode, 1);
 
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (charTyped == "€") { // ajout d'une image
        e.preventDefault();
 
        var sel = window.getSelection();
 
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
 
            range.deleteContents();
 
            sel.removeAllRanges();
            sel.addRange(range);
 
            document.execCommand('insertHTML', false, '<img src="../images/avatarDVJH.jpg" alt="Daniel Hagnoul" />');
        }
    }
}, false);

08/01/2015, 16h00
Clément.7

C'est pas ça...

Effectivement, mais moi mon but n'est pas d'insérer du HTML mais bien de le modifier !
Par exemple :

lors de l'évènement onkeypress, je vais faire ça :

Code:

editor.innerHTML = editor.innerText.replace(/function/g, '<span style="color: blue;">function</span>');

et c'est ce qui me permets de faire de la coloration syntaxique...

Quelqu'un a une idée sur le sujet ?
12/01/2015, 20h17
vandenn3

Salut,

Les des éditeurs de texte JavaScript avec coloration syntaxique que j'ai vu ne remplaçaient pas le texte comme ça. Ils utilisaient un textarea, dans lequel le texte avait une couleur grise très clair ou même invisible, et derrière cette textarea il y avait un div dans lequel était copié le contenu du textarea à chaque fois qu'il changait. Et c'était ce contenu qui était coloré.
En opérant de la sorte, cela règle ton problème: plus besoin de devoir modifier un élément dans lequel il y a des parties de textes invisibles pour l'utilisateur (->par exemple ajouter des <span>, puis devoir positionner le curseur près de ces spans).
13/01/2015, 20h01
NoSmoking

Citation:

Envoyé par Clément.7

(...)mais moi mon but n'est pas d'insérer du HTML mais bien de le modifier !

j'ai quand même du mal à voir la différence attendu que tu insères un élément SPAN !
14/01/2015, 13h21
Clément.7

OK merci beaucoup je vais essayer ça !

EDIT : Désolé je n'avais pas vu la page 2 sur mon smartphone; pour faire simple ça permettrait de corriger le problème qui fait que le curseur se déplace de manière intempestive et qui rend donc impossible "la rédaction" d'un fichier HTML etc.
15/01/2015, 16h59
Clément.7

Très bien l'éditeur fonctionne parfaitement merci à tous !
Juste une dernière question : le textarea ayant un texte invisible et un background invisible (color: transparent; background-color: transparent;), le curseur est invisible...
Sauriez-vous comment faire pour l'afficher ? par exemple modifier la couleur du curseur (une propriété du genre cursor-color par exemple) ?

EDIT : C'est bon j'ai trouvé après une longue recherche sur google (pour ceux que ça intéresserait cliquez ici : http://stackoverflow.com/questions/1...arent-textarea http://jsfiddle.net/JamesD/HaPAe/1/)

Merci beaucoup à tous !