Positionner le caret dans un contenteditable

[xess91]

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!

[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 ...

[xess91]

Comment je fais ça pour voir les propriétés de "sel" ?

[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:

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

et sous ffx :

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] }

[xess91]

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?

[SpaceFrog]

setStart par exemple ...

[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.

[SpaceFrog]

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

[xess91]

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.

[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

[xess91]

Merci SpaceFrog 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 ?

[SpaceFrog]

Cela provient à mon avis du contenteditable ...
Pour moi auras plus vite fait de placer temporairement un textarea au dessus de la zone...

[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.

[Bovino]

Envoyé par xess91

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

Comment ça eux le font

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

[SpaceFrog]

Trouvé sous IE ...

Code :

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

pas encore pour ffx

[SpaceFrog]

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 ...

[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!?

[Bovino]

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.
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

[NoSmoking]

Bonjour,
cette discussion pourrait vous intéresser et notamment http://www.developpez.net/forums/d10...x/#post5763662

[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.