Définir la position du curseur à une position spécifique dans div divisible

VOIR AVANT DE MARQUER DUPLIQUER/DOWNVOTING

  1. La contenteditable div sera a pas d'éléments enfants
  2. Je ne veux pas de définir la position à la fin de la div
  3. Je ne veulent pas d'une solution de navigateurseul Chrome soutien nécessaire
  4. Seulement vanille JSpas de bibliothèques.

J'ai vu beaucoup beaucoup de solutions. Nombreux par Tim vers le Bas, et d'autres. Mais aucun ne fonctionne. J'ai vu window.getSelection.addRange etc. mais je ne vois pas comment elles s'appliquent ici.

Voici un jsfiddle.

(Essayé) Code:

var node = document.querySelector("div");
node.focus();
var caret = 10; //insert caret after the 10th character say
var range = document.createRange();
range.setStart(node, caret);
range.setEnd(node, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

source d'informationauteur Gaurang Tandon

  1. 26

    Vous avez besoin pour positionner le curseur dans le texte, le nœud à l'intérieur de votre élément, et non pas l'élément lui-même. En supposant que votre code HTML ressemble à quelque chose comme <div contenteditable="true">Some text</div>à l'aide de la firstChild propriété de l'élément obtiendrez le nœud de texte.

    Mis à jour jsFiddle:

    http://jsfiddle.net/xgz6L/8/

    Code:

    var node = document.querySelector("div");
node.focus();
var textNode = node.firstChild;
var caret = 10; //insert caret after the 10th character say
var range = document.createRange();
range.setStart(textNode, caret);
range.setEnd(textNode, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);