que - poner id con javascript

removeChild a veces elimina todo el intervalo y, a veces no lo hace

Question

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 + "''>&nbsp;</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.

Answer 1

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

1. getSelection
2. getRangeAt
3. getClientRects
4. scrollBy