Eu estou trabalhando em um editor de texto rico para iOS e tenho a maioria trabalhando, mas correndo em problemas sem fim, garantindo que o cursor esteja visível na viewport quando o usuário começar a digitar.

Eu criei uma nova abordagem: insira uma extensão na posição do cursor, role até a extensão e, em seguida, remova-a. (Eu não cheguei a apenas rolar se o intervalo está na tela.) Aqui está o que eu escrevi:

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);
}

Em alguns casos, isso funciona bem e, em alguns casos, deixa um espaço sem quebra entre cada pressionamento de tecla, removendo apenas as tags <span> </ span>. Alguma ideia? Estou aberto a melhores maneiras de fazer isso se alguém tiver sugestões. Estou um pouco chocado com o quão difícil é fazer com que o cursor apareça, mas o JS é novo para mim.

EDITAR

Este é o 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
}

O viewportHeight é mais complicado do que o necessário para um aplicativo da web. Para um aplicativo móvel, precisamos considerar o teclado, portanto, ofereça um método para configurar o viewportHeight manualmente, bem como a configuração automática a partir do window.innerHeight.