Comment faire pour déplacer le curseur à la fin de contenteditable entité

Il y a aussi un autre problème.

La Nico Brûlures's solution fonctionne si le contenteditable div ne contient pas d'autres multilined éléments.

Par exemple, si une div qui contient d'autres divs, et ces autres divs contenir d'autres trucs à l'intérieur, peut se produire des problèmes.

Afin de les résoudre, j'ai arrangé la solution suivante, qui est une amélioration de la Nico's:

//Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
(function( cursorManager ) {
//From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];
//From: https://stackoverflow.com/questions/237104/array-containsobj-in-javascript
Array.prototype.contains = function(obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return true;
}
}
return false;
}
//Basic idea from: https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text
function canContainText(node) {
if(node.nodeType == 1) { //is an element node
return !voidNodeTags.contains(node.nodeName);
} else { //is not an element node
return false;
}
};
function getLastChildElement(el){
var lc = el.lastChild;
while(lc && lc.nodeType != 1) {
if(lc.previousSibling)
lc = lc.previousSibling;
else
break;
}
return lc;
}
//Based on Nico Burns's answer
cursorManager.setEndOfContenteditable = function(contentEditableElement)
{
while(getLastChildElement(contentEditableElement) &&
canContainText(getLastChildElement(contentEditableElement))) {
contentEditableElement = getLastChildElement(contentEditableElement);
}
var range,selection;
if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
{    
range = document.createRange();//Create a range (a range is a like the selection but invisible)
range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
selection = window.getSelection();//get the selection object (allows you to change selection)
selection.removeAllRanges();//remove any selections already made
selection.addRange(range);//make the range you have just created the visible selection
}
else if(document.selection)//IE 8 and lower
{ 
range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
range.select();//Select the range (make it the visible selection
}
}
}( window.cursorManager = window.cursorManager || {}));

Utilisation:

var editableDiv = document.getElementById("my_contentEditableDiv");
cursorManager.setEndOfContenteditable(editableDiv);

De cette façon, le curseur est certainement positionné à la fin du dernier élément, éventuellement imbriqués.

EDIT #1: pour être plus générique, l'instruction while devrait tenir également compte de toutes les autres balises qui ne peut pas contenir de texte. Ces éléments sont nommés vide éléments, et dans cette question il existe quelques méthodes sur la façon de tester si un élément est vide. Donc, en supposant qu'il existe une fonction appelée canContainText qui renvoie true si l'argument n'est pas un vide de l'élément, la ligne de code suivante:

contentEditableElement.lastChild.tagName.toLowerCase() != 'br'

doit être remplacé par:

canContainText(getLastChildElement(contentEditableElement))

EDIT #2: Le code ci-dessus est entièrement mis à jour, avec tous les changements décrits et discutés

Si vous n'avez pas de soins sur les navigateurs plus anciens, celui-ci a fait l'affaire pour moi.

//[optional] make sure focus is on the element
yourContentEditableElement.focus();
//select all the content in the element
document.execCommand('selectAll', false, null);
//collapse selection to the end
document.getSelection().collapseToEnd();

J'ai eu un problème similaire en essayant de faire un élément modifiable. Il a été possible de Chrome et FireFox, mais dans FireFox le signe soit vers le début de l'entrée ou il est allé un espace après la fin de l'entrée. Très déroutant pour l'utilisateur final je pense, en essayant d'en modifier le contenu.

Je n'ai trouvé aucune solution à essayer plusieurs choses. Seule chose qui a fonctionné pour moi a été de "contourner le problème en mettant un texte d'entrée à l'INTÉRIEUR de mon . Maintenant, il fonctionne. Semble comme "contenu modifiable" est toujours à la pointe de la tech, qui peut ou peut ne fonctionne pas comme tu le voudrais au travail, selon le contexte.