Obtenir la position du curseur dans contentEditable div

Quelques rides que je ne vois pas abordés dans les autres réponses:

1. l'élément peut contenir plusieurs niveaux de nœuds enfants (par exemple, les nœuds enfants qui ont des nœuds enfants qui ont des nœuds enfants...)
2. une sélection peut être constituée de différentes positions début et de fin (par exemple, plusieurs caractères sont sélectionnés)
3. le nœud contenant un Signe de début/de fin ne peut pas être l'élément ou de ses enfants directs

Ici un moyen d'obtenir de début et de fin des postes de décalages à celle de l'élément textContent valeur:

//node_walk: walk the element tree, stop when func(node) returns false
function node_walk(node, func) {
var result = func(node);
for(node = node.firstChild; result !== false && node; node = node.nextSibling)
result = node_walk(node, func);
return result;
};
//getCaretPosition: return [start, end] as offsets to elem.textContent that
//  correspond to the selected portion of text
//  (if start == end, caret is at given position and no text is selected)
function getCaretPosition(elem) {
var sel = window.getSelection();
var cum_length = [0, 0];
if(sel.anchorNode == elem)
cum_length = [sel.anchorOffset, sel.extentOffset];
else {
var nodes_to_find = [sel.anchorNode, sel.extentNode];
if(!elem.contains(sel.anchorNode) || !elem.contains(sel.extentNode))
return undefined;
else {
var found = [0,0];
var i;
node_walk(elem, function(node) {
for(i = 0; i < 2; i++) {
if(node == nodes_to_find[i]) {
found[i] = true;
if(found[i == 0 ? 1 : 0])
return false; //all done
}
}
if(node.textContent && !node.firstChild) {
for(i = 0; i < 2; i++) {
if(!found[i])
cum_length[i] += node.textContent.length;
}
}
});
cum_length[0] += sel.anchorOffset;
cum_length[1] += sel.extentOffset;
}
}
if(cum_length[0] <= cum_length[1])
return cum_length;
return [cum_length[1], cum_length[0]];
}

OriginalL'auteur mwag

//global savedrange variable to store text range in
var savedrange = null;
function getSelection()
{
var savedRange;
if(window.getSelection && window.getSelection().rangeCount > 0) //FF,Chrome,Opera,Safari,IE9+
{
savedRange = window.getSelection().getRangeAt(0).cloneRange();
}
else if(document.selection)//IE 8 and lower
{ 
savedRange = document.selection.createRange();
}
return savedRange;
}
$('#contentbox').keyup(function() { 
var currentRange = getSelection();
if(window.getSelection)
{
//do stuff with standards based object
}
else if(document.selection)
{ 
//do stuff with microsoft object (ie8 and lower)
}
});

Remarque: la portée de l'objet de son auto peut être stocké dans une variable, et peut être re-sélectionné à tout moment, à moins que le contenu de la contenteditable div changement.

De référence pour IE 8 et inférieur:
http://msdn.microsoft.com/en-us/library/ms535872(SV.85).aspx

De référence pour les normes (tous les autres) navigateurs:
https://developer.mozilla.org/en/DOM/range (mozilla docs, mais le code fonctionne dans chrome, safari, opera et ie9 trop)

OriginalL'auteur Nico Burns

Celui-ci fonctionne pour moi:

function getCaretCharOffsetInDiv(element) {
var caretOffset = 0;
if (typeof window.getSelection != "undefined") {
var range = window.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
}
else if (typeof document.selection != "undefined" && document.selection.type != "Control")
{
var textRange = document.selection.createRange();
var preCaretTextRange = document.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
} 

la ligne d'appel dépend du type d'événement, pour les principaux cas d'utilisation de ce:

getCaretCharOffsetInDiv(e.target) + ($(window.getSelection().getRangeAt(0).startContainer.parentNode).index());

pour l'événement de souris utiliser ceci:

getCaretCharOffsetInDiv(e.target.parentElement) + ($(e.target).index())

sur ces deux cas, je prends soin de lignes de rupture par l'ajout de l'indice cible

OriginalL'auteur Jonathan R.

Directement, qui parcourt tous les enfants de la contenteditable div jusqu'à ce qu'il frappe le endContainer. Puis-je ajouter de la fin du conteneur de décalage et nous ont le caractère d'index. Fonctionne avec n'importe quel nombre d'imbrications. utilise la récursivité.

Remarque: nécessite un poly remplir pour ie soutien Element.closest('div[contenteditable]')

https://codepen.io/alockwood05/pen/vMpdmZ

function caretPositionIndex() {
const range = window.getSelection().getRangeAt(0);
const { endContainer, endOffset } = range;
//get contenteditableDiv from our endContainer node
let contenteditableDiv;
const contenteditableSelector = "div[contenteditable]";
switch (endContainer.nodeType) {
case Node.TEXT_NODE:
contenteditableDiv = endContainer.parentElement.closest(contenteditableSelector);
break;
case Node.ELEMENT_NODE:
contenteditableDiv = endContainer.closest(contenteditableSelector);
break;
}
if (!contenteditableDiv) return '';
const countBeforeEnd = countUntilEndContainer(contenteditableDiv, endContainer);
if (countBeforeEnd.error ) return null;
return countBeforeEnd.count + endOffset;
function countUntilEndContainer(parent, endNode, countingState = {count: 0}) {
for (let node of parent.childNodes) {
if (countingState.done) break;
if (node === endNode) {
countingState.done = true;
return countingState;
}
if (node.nodeType === Node.TEXT_NODE) {
countingState.count += node.length;
} else if (node.nodeType === Node.ELEMENT_NODE) {
countUntilEndContainer(node, endNode, countingState);
} else {
countingState.error = true;
}
}
return countingState;
}
}

OriginalL'auteur alockwood05