Positionner le caret dans un contenteditable

Version imprimable

Voir 40 message(s) de cette discussion en une page

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.

Voir 40 message(s) de cette discussion en une page