Positionner le caret dans un contenteditable

Version imprimable

29/07/2011, 10h47
xess91

Positionner le caret dans un contenteditable

Bonjours à tous!

Tout est dans mon titre : Comment positionner le caret à un endroit précis dans un bloc en contenteditable ?

J'arrive d'ores et déjà à récupérer la sélection, à la modifier et à recréer une sélection autour du texte modifié mais rien à faire le focus se positionne au début du bloc...

Merci à tous pour votre aide:)!
29/07/2011, 11h26
SpaceFrog
pour IE:
Code:

1 2 var sel= document.body.createTextRange();
pour ffx
Code:

1 2 var sel= document.createRange();
ensuite regarde dans les propriétés de sel ...
29/07/2011, 11h29
xess91

Comment je fais ça pour voir les propriétés de "sel" ?
29/07/2011, 11h36
SpaceFrog
Un code vite fair juste pour visualiser
Code:

1 2 3 4 5 6 var liste="" for (prop in sel){ liste+=prop +' => '+sel[prop]+'<br/>'; } document.body.innerHTML+=liste
ce qui sous IE me donne:

Citation:

text =>
boundingWidth => 0
offsetLeft => 12
boundingLeft => 12
htmlText =>
boundingTop => 17
offsetTop => 17
boundingHeight => 0

et sous ffx :

Citation:

startContainer => [object HTMLDocument]
startOffset => 0
endContainer => [object HTMLDocument]
endOffset => 0
collapsed => true
commonAncestorContainer => [object HTMLDocument]
setStart => function setStart() { [native code] }
setEnd => function setEnd() { [native code] }
setStartBefore => function setStartBefore() { [native code] }
setStartAfter => function setStartAfter() { [native code] }
setEndBefore => function setEndBefore() { [native code] }
setEndAfter => function setEndAfter() { [native code] }
collapse => function collapse() { [native code] }
selectNode => function selectNode() { [native code] }
selectNodeContents => function selectNodeContents() { [native code] }
compareBoundaryPoints => function compareBoundaryPoints() { [native code] }
deleteContents => function deleteContents() { [native code] }
extractContents => function extractContents() { [native code] }
cloneContents => function cloneContents() { [native code] }
insertNode => function insertNode() { [native code] }
surroundContents => function surroundContents() { [native code] }
cloneRange => function cloneRange() { [native code] }
toString => function toString() { [native code] }
detach => function detach() { [native code] }
START_TO_START => 0
START_TO_END => 1
END_TO_END => 2
END_TO_START => 3
createContextualFragment => function createContextualFragment() { [native code] }
isPointInRange => function isPointInRange() { [native code] }
comparePoint => function comparePoint() { [native code] }
getClientRects => function getClientRects() { [native code] }
getBoundingClientRect => function getBoundingClientRect() { [native code] }

Merci pour cette information,

Effectivement j'utilise quelques une de ces méthodes comme ceci:
Code:

1 2 3 4 5 6 7 el("editable").focus(); var range = document.createRange(); range.setStart(el("editable"), 1); range.setEnd(el("editable"), 2); var objet_selection = window.getSelection(); objet_selection.addRange(range);
Je ne vois pas comment et/ou quel méthode permet de positionner le curseur.
As-tu un exemple s'il te plait?

29/07/2011, 12h03
SpaceFrog

setStart par exemple ...
29/07/2011, 12h11
xess91

Non setStart détermine le début de la sélection et pas la position du curseur...

Le premier argument est l'élément html qui dois recevoir la sélection, le deuxième argument est le numéro du noeud où commence la sélection.

Tu peux essayer mon script tu verras ça ne positionne pas le curseur.
D'ailleurs si tu pouvez le tester je saurai si le problème vient d'une autre partie de mon script ou non.:)
29/07/2011, 12h14
SpaceFrog

as tu essyé une unsertion de vide à l'endroit voulu avec un setStart=setEnd ??

Je viens de tester le curseur se positionne au début du div éditable.

Exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id="editable" class="editable" contenteditable="true">xxxxx<b>yyyyy</b>zzzzz</div> <script type="text/javascript"> function el(id) { return document.getElementById(id); } el("editable").focus(); var range = document.createRange(); range.setStart(el("editable"), 1); range.setEnd(el("editable"), 2); var objet_selection = window.getSelection(); objet_selection.addRange(range); </script>
Une fois le chargement terminé en écrivant directement du texte on se rend compte que le focus est au début et non à la zone sélectionnée.

29/07/2011, 13h00
SpaceFrog
Code:

1 2 3 4 5 if(ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos,pos); }
ceci fonctionne sous FFX pour un textarea ....
mais à priori pas pour un content editable ...

sinon http://stackoverflow.com/questions/1...nteditable-div
29/07/2011, 13h21
xess91

Merci SpaceFrog :D c'est effectivement le script que j'étais entrain d'étudier...La resélection se fait bien mais le curseur est toujours indomptable.

En tout cas le principe d'insérer des spans avant et après le texte de remplacement pour recalculer une nouvelle sélection me parait nettement mieux que setStart et setEnd pour lesquelles il faut indiquer le noeud dans lequel se trouvera la selection...

Que faire pour positionner le curseur ? :arf:
29/07/2011, 13h23
SpaceFrog

Cela provient à mon avis du contenteditable ...
Pour moi auras plus vite fait de placer temporairement un textarea au dessus de la zone...
29/07/2011, 15h22
xess91

Je continue de penser que c'est possible eux le font : Ici.

J'ai télécharger le source mais je n'ai pas encore eu le temps de la regarder, affaire à suivre!

Reste en attente d'infos complémentaires.:)
29/07/2011, 15h40
Bovino

Citation:

Envoyé par xess91

Je continue de penser que c'est possible eux le font : Ici.

Comment ça eux le font :koi:

Tout ce que je vois, c'est que le curseur se positionne à l'endroit où tu as cliqué dans le texte, il n'y a rien d'extraordinaire à ça ni de code pour le gérer :?

Trouvé sous IE ...
Code:

1 2 3 sel = document.selection.createRange(); sel.moveStart('character', pos); sel.select();
pas encore pour ffx

ha ben voilà

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type="text/javascript">
function placeCaret(obj,pos){
 
obj=document.getElementById(obj); 
obj.focus();
if(document.selection) {
  sel = document.selection.createRange();
  sel.moveStart('character', pos);
  sel.select();
}
else{
  sel = window.getSelection();
  sel.collapse(obj.firstChild, pos+1);
  sel.select()
}
}
</script>
</head>
 
<body>
<div id="foo" contenteditable >
ljhlkjhlkjh
</div>
<script type="text/javascript">
placeCaret('foo',3)
</script>
 
</body>
</html>

Testé sous IE FFX et chrome

ATTENTION : celà ne tient pas compte des balises html dans le div ...

29/07/2011, 16h30
xess91

Merci SpaceFrog,

Je vais rajouter cela à mon script!

Bovino, si j'ai bien compris le script Aloha transforme les divs en éditable lors d'un clic pour éditer à la volée les blocs.

En tout cas merci pour l'investissement je suppose que pos vaut le nombre de caractères!?
29/07/2011, 18h24
Bovino

Citation:

Envoyé par xess91

Bovino, si j'ai bien compris le script Aloha transforme les divs en éditable lors d'un clic pour éditer à la volée les blocs.

Oui, c'est le principe de contenteditable. :mrgreen:
Pour preuve : http://dmouronval.developpez.com/editable/ : pas une once de JavaScript, pourtant tu peux cliquer où tu veux, le curseur sera correctement positionné en mode édition ;)
29/07/2011, 18h27
NoSmoking

Bonjour,
cette discussion pourrait vous intéresser et notamment http://www.developpez.net/forums/d10...x/#post5763662
30/07/2011, 22h04
xess91

Oui bovino tu as raison et c'est cela qui est bien, mais la particularité du script Aloha est qu'il exploite cette possibilité dans le cadre d'un wysiwyg qui fournit des fonctionnalités d'éditions de base et je présume sans iframe.
30/07/2011, 22h13
Bovino

Citation:

Envoyé par xess91

Oui bovino tu as raison et c'est cela qui est bien, mais la particularité du script Aloha est qu'il exploite cette possibilité dans le cadre d'un wysiwyg qui fournit des fonctionnalités d'éditions de base et je présume sans iframe.

Oui, j'ai bien vu cela ;)
La seule chose que je voulais te montrer, c'est que la position du curseur dépend du clic de l'utilisateur, pas du script, qui lui se charge de tout l'aspect modification et styles.
Mais c'est vrai qu'ayant déjà eu à faire une appli de ce genre (à base de contenteditable), j'avoue que leur résultat est pas mal, car le plus compliqué avec contenteditable est la gestion complexe liée aux inconsistances des navigateurs ! Ce qui explique d'ailleurs probablement le peu d'options au final de leur script.
Dans mon cas, j'avais géré beaucoup plus de type de balises (jusqu'à l'insertion d'images éventuellement à uploader) mais le résultat, bien que valide sur tous les navigateurs, ne respectait pas la même logique pour chacun (pas la même gestion du comportement s'il n'y a pas de sélection, gestion calamiteuse des styles et des suppressions de formatage, j'en passe).
31/07/2011, 09h58
xess91

Moi aussi le problème que je rencontre survient lors d'insertion d'images, de liens et de couleurs(palette de couleur javascript) dans un bloc type sous-menu div qui réclame les informations à l'utilisateur sans utiliser prompt et dans ce cas le contenteditable perd le focus et la sélection.

Il me faut donc en recréer une et repositionner le caret au bon endroit, pas facile tout ça!
31/07/2011, 12h08
Bovino

Ah oui, effectivement, je me souviens avoir eu à régler ce problème effectivement !
En réalité, la solution est plus simple que tu ne crois :)
La problématique : lorsque tu cliques sur la partie éditable, cela positionne le curseur, mais lorsque tu cliques sur un bouton, tu perds la position et la sélection.
La solution : en fait, la perte de focus se fait sur l'événement onclick, il faut donc utiliser onmousedown pour gérer les modifications et retoutner false : comme ça, tu n'as plus de perte de focus ;)
Pour ce qui est des images, c'est le même principe, sauf que si tu ouvres une fenêtre (soit pour proposer parmi les images existantes ou pour un input file) et que tu fais un choix, alors pareil : perte de focus sur la partie éditable. La solution est de passer par showModalDialog() qui a le même effet qu'un message de type alert().
02/08/2011, 16h52
xess91
Oui mais showModalDialog() ne m'intéresse pas car le style n'est pas personnalisable et c'est bien trop contraignant en terme d'ergonomie(je ne parle pas de la conception)...

A l'heure du web 2.0 et de l'html5 les popups type fenêtre sont obsolètes.

Il me semble aussi que sur des boutons comme ceci il n'y a pas de perte de focus:
Code:

1 2 <button onclick="catchSelection()">Gras</button>
Parcontre c'est vrai que pour des boutons de ce type il y a perte de focus donc obligé de mettre la fonction sur un évènement onmousedown:
Code:

1 2 <span onmousedown="catchSelection()">Gras</span>