Discussion :

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

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

1
2
 
var sel= document.body.createTextRange();

pour ffx

Code :

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

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 :

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

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 :

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

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