Comment définir le signe d'insertion(curseur) position dans contenteditable élément (div)?

Question

J'ai cette simple HTML comme par exemple:

<div id="editable" contenteditable="true">
  text text text<br>
  text text text<br>
  text text text<br>
</div>
<button id="button">focus</button>

Je veux quelque chose de simple: - quand je clique sur le bouton, je veux mettre l'accent circonflexe(curseur) dans le lieu précis dans la modifiable div. À partir d'une recherche sur le web, j'ai ce JS attaché à bouton de la souris, mais il ne fonctionne pas (FF, Chrome):

var range = document.createRange();
var myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

Est-il possible de régler manuellement la position du curseur comme ça ?

Answer 1

Dans la plupart des navigateurs, vous avez besoin de l' Range et Selection objets. Vous spécifiez chacune des limites de la sélection comme un nœud et d'un décalage à l'intérieur de ce nœud. Par exemple, pour définir le signe de la cinquième caractère de la deuxième ligne de texte, vous ne les suivants:

var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

IE < 9 fonctionne d'une manière complètement différente. Si vous avez besoin à l'appui de ces navigateurs, vous aurez besoin d'un code différent.

jsFiddle exemple: http://jsfiddle.net/timdown/vXnCM/

Answer 2

La réponse Simple est oui c'est possible, mais pas de façon cohérente.

Il y a le [élément].setSelectionRange API qui est disponible sur Firefox et Chrome. Si vous définissez l'heure de début et de fin de la plage du même point simple déplace le curseur (comme le font les autres navigateur équivalents, je crois).

https://developer.mozilla.org/en/XUL/Method/setSelectionRange

var myDiv = document.getElementById("editable");
myDiv.setSelectionRange(5, 5);

Le problème avec ce genre de bas niveau de la manipulation est qu'il n'existe pas d'API prises en charge de la croix-navigateur de sorte que vous aurez besoin pour l'emballage de tous vos fonctionnalités à l'intérieur d'aides qui permettent de détecter le navigateur et l'utilisation de l'API appropriée pour ce navigateur.

Généralement, il est un des maux de tête, l'ingénierie inverse les différentes implémentations de contenu modifiable sur tous les navigateurs. Espérons que comme nous nous dirigeons vers HTML 5 de la situation deviendra beaucoup plus cohérent à travers le navigateur.

Answer 3

Vous pouvez maintenant utiliser le jquery curseur plugin

et de définir la position du curseur avec:

$(textarea).caret(pos)