contenteditable, establecer el cursor al final del texto (navegador cruzado)

salida en Chrome :

hey
what's up?

Creo en FF se vería algo como esto:

 hey 
what's up?

y en IE :

 hey 

what's up?

desafortunadamente, no hay una buena manera de hacerlo para que cada navegador inserte un
lugar de una etiqueta div o p, o al menos no pude encontrar nada en línea.


DE TODOS MODOS, lo que bash hacer ahora es que cuando presiono el botón , quiero que el símbolo de intercalación se coloque al final del texto, por lo que debería verse más o menos así:

 hey what's up?| 

¿Hay alguna manera de hacer esto para que funcione en todos los navegadores ?

ejemplo:

 $(document).ready(function() { $('#insert_caret').click(function() { var ele = $('#content'); var length = ele.html().length; ele.focus(); //set caret -> end pos } } 

La siguiente función lo hará en todos los principales navegadores:

 function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } placeCaretAtEnd( document.getElementById("content") ); 

Colocar el símbolo de intercalación al principio es casi idéntico: solo requiere cambiar el valor booleano pasado a las llamadas para collapse() . Aquí hay un ejemplo que crea funciones para colocar el cursor al principio y al final:

 function createCaretPlacer(atStart) { return function(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(atStart); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(atStart); textRange.select(); } }; } var placeCaretAtStart = createCaretPlacer(true); var placeCaretAtEnd = createCaretPlacer(false); 

Desafortunadamente, la excelente respuesta de Tim funcionó para mí solo para ubicarla al final, para colocarla al principio tuve que modificarla ligeramente.

 function setCaret(target, isStart) { const range = document.createRange(); const sel = window.getSelection(); if (isStart){ const newText = document.createTextNode(''); target.appendChild(newText); range.setStart(target.childNodes[0], 0); } else { range.selectNodeContents(target); } range.collapse(isStart); sel.removeAllRanges(); sel.addRange(range); target.focus(); target.select(); } 

Sin embargo, no estoy seguro si focus() y select() son realmente necesarios.

Si está utilizando el comstackdor de cierre de google, puede hacer lo siguiente (algo simplificado a partir de la respuesta de Tim):

 function placeCaretAtEnd(el) { el.focus(); range = goog.dom.Range.createFromNodeContents(el); range.collapse(false); range.select(); } 

Esto es lo mismo en ClojureScript:

 (defn place-caret-at-end [el] (.focus el) (doto (.createFromNodeContents goog.dom.Range el) (.collapse false) .select)) 

He probado esto en Chrome, Safari y Firefox, no estoy seguro acerca de IE …