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
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 } }
- Establecer la posición del cursor en div editable por contenido
- ¿Puedo cambiar el cursor intermitente en un área de formulario / texto en un navegador?
- ¿Cómo obtener el número de filas en el área de ContentEditable y la posición actual de la línea de intercalación?
- Obtener la posición de intercalación en la entrada de HTML?
- Posición de cursor en píxeles en un texto de tipo de entrada (no en un área de texto)
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 …