Cambiar la posición del cursor en la div contenteditable después de cambiar innerHTML

Tengo una div simple contenteditable con algún texto en ella. En el evento onkeyup quiero reemplazar todo el contenido (innerHTML) del div basado en regex.Cambiar la posición del cursor en la div contenteditable después de cambiar innerHTML

Por ejemplo,

HTML:

some text, more text and $even more text

función en la que el plan de i para obtener todo el texto con $ ($ siquiera en el ejemplo anterior) y se envuelve en la etiqueta span:

div.onkeypress = function() { 
    div.innerHTML.replace(/(some_regexp)/, "<span class='class'>$1</span>"); 
};

El problema es que el cursor de reemplazo salta al inicio de div. Quiero que permanezca donde estaba antes.

Imagino que tengo que guardar las coordenadas del cursor antes del cambio y de alguna manera usarlas establecer el cursor hacia atrás, pero ¿cómo puedo hacerlo? :)

Intenté guardar el objeto de rango, pero después de la edición creo que no apunta a ninguna parte.

Gracias!

Fuente

2010-09-24 Ilya Tsuryev

¿Cómo se ve el código HTML como el reemplazo? –

He actualizado la pregunta original. si sabes cómo obtener el comportamiento esperado por otros medios sin cambiar todo HTML interno, sería genial escucharlo. –

Sé que es una vieja pregunta, pero ¿lograron encontrar una solución para esto? Estoy teniendo exactamente la misma necesidad –

El problema es que está actualizando todo el innerHTML, pero solo una pequeña parte está cambiando. No puede usar una expresión regular y o un reemplazo masivo. Necesita escanear el div y buscar coincidencias, crear intervalos de texto y ajustar el contenido con el lapso. Vea http://www.quirksmode.org/dom/range_intro.html, creando programáticamente un rango.

Sin embargo, creo que esto no funcionará si el cursor está en el texto a reemplazar, aunque es un comienzo.

Fuente

2010-09-28 16:57:39

He intentado su sugerencia, pero a pesar de que utilicé el rango, la posición de intercalación vuelve al comienzo de la div. – carmina

@carmina Difícil de decir si no muestra su código. Sin embargo, si tiene alguna pregunta, hágala como una nueva pregunta (con el código que utilizó), para que se pueda abordar correctamente –

, consulte: http://stackoverflow.com/questions/20262798/using-insertnode-to -add-a-span-en-a-contenteditable-div-changes-the-cursor-posit – carmina

Usted sabe qué texto está reemplazando. Entonces sabes la posición de ese texto. allí solo vas a poner el nuevo texto. Luego, también la posición es la misma. Después de escribir un nuevo html, puede establecer el cursor.

por ejemplo

yo no undertsand la cuestión

posición de pregunta es 5 un i reemplazarlo

yo no undertsand la respuesta

hacen que la posición del cursor hasta 5

http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning

http://hartshorne.ca/2006/01/23/javascript_cursor_position/

http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx

Fuente

2010-09-30 18:05:44 zod

Tomé esta de otro foro. Solucionó mi problema.

Ok, me las arreglé para trabajar alrededor de ella, aquí está la solución si alguien está interesado:

de los valores seleccionados x, y:

Código:

cursorPos=document.selection.createRange().duplicate(); 
clickx = cursorPos.getBoundingClientRect().left; 
clicky = cursorPos.getBoundingClientRect().top;

restaurar la selección:

Código:

cursorPos = document.body.createTextRange(); 
cursorPos.moveToPoint(clickx, clicky); 
cursorPos.select();

Puede ver su funcionamiento aquí:

http://www.tachyon-labs.com/sharpspell/

Fuente

2011-01-17 17:07:49 Serena

¿Me falta algo? Siguió el enlace, la demostración en vivo seleccionada. Haga clic en la mitad de la palabra, haga clic con el botón derecho, seleccione la opción y el cursor salte al final de la línea. –

Cambiar la posición del cursor en la div contenteditable después de cambiar innerHTML

Respuesta

Cuestiones relacionadas