que - poner id con javascript
removeChild a veces elimina todo el intervalo y, a veces no lo hace (1)
Estoy trabajando en un editor de texto enriquecido para iOS y tengo la mayor parte funcionando, pero corriendo en un sinfín de problemas asegurándome de que el cursor esté visible en la ventana gráfica cuando el usuario comienza a escribir.
Se me ocurrió un enfoque novedoso: inserte un tramo en la posición del cursor, desplácese hasta el tramo y luego retírelo. (No he tenido que desplazarme solo si el tramo está en pantalla). Esto es lo que escribí:
document.addEventListener(''keypress'', function(e) {
jumpToID();
}, false);
function jumpToID() {
var id = "jumphere2374657";
var text = "<span id=''" + id + "''> </span>"
document.execCommand(''insertHTML'', false, text);
var element = document.getElementById(id);
element.scrollIntoView();
element.parentNode.removeChild(element);
}
En algunos casos, esto funciona muy bien y, en algunos casos, deja un espacio sin interrupciones entre cada pulsación de tecla, eliminando únicamente las etiquetas <span> </ span>. ¿Algunas ideas? Estoy abierto a mejores formas de hacerlo si alguien tiene sugerencias. Estoy un poco sorprendido de lo difícil que es hacer que el cursor aparezca, pero entonces JS es nuevo para mí.
EDITAR
Este es el código que funciona:
var viewportHeight = 0;
function setViewportHeight(vph) {
viewportHeight = vph;
if(viewportHeight == 0 && vph != 0)
viewportHeight = window.innerHeight;
}
function getViewportHeight() {
if(viewportHeight == 0)
return window.innerHeight;
return viewportHeight;
}
function makeCursorVisible() {
var sel = document.getSelection(); // change the selection
var ran = sel.getRangeAt(0); // into a range
var rec = ran.getClientRects()[0]; // that we can get coordinates from
if (rec == null) {
// Can''t get coords at start of blank line, so we
// insert a char at the cursor, get the coords of that,
// then delete it again. Happens too fast to see.
ran.insertNode( document.createTextNode(".") );
rec = ran.getClientRects()[0]; // try again now that there''s text
ran.deleteContents();
}
var top = rec.top; // Y coord of selection top edge
var bottom = rec.bottom; // Y coord of selection bottom edge
var vph = getViewportHeight();
if (top < 0) // if selection top edge is above viewport top,
window.scrollBy(0, top); // scroll up by enough to make the selection top visible
if (bottom >= vph) // if selection bottom edge is below viewport bottom,
window.scrollBy(0, bottom-vph + 1); // scroll down by enough to make the selection bottom visible
}
La ventana viewHeight es más complicada de lo necesario para una aplicación web. Para una aplicación móvil, necesitamos contabilizar el teclado, así que ofrezca un método para configurar la viewportHeight de forma manual, así como la configuración automática de window.innerHeight.
No sé si esto funcionará en iOS, pero si la posición del cursor significa que hay una selección en ese punto ...
function moveToSelection(){
var sel = document.getSelection(), // change the selection
ran = sel.getRangeAt(0), // into a range
rec = ran.getClientRects()[0], // that we can get co-ordinates from
dy = rec.top; // distance to move down/up
window.scrollBy( 0, dy ); // actual move
// console.log( sel, ran, rec, y ); // help debug
}
moveToSelection();
Enlaces relevantes