Ich arbeite an einem Rich-Text-Editor für iOS und habe das meiste davon, stoße aber auf endlose Probleme, um sicherzustellen, dass der Cursor im Ansichtsfenster sichtbar ist, wenn der Benutzer mit der Eingabe beginnt.

Ich habe mir einen neuen Ansatz ausgedacht: Fügen Sie einen Bereich an der Cursorposition ein, scrollen Sie zu dem Bereich und entfernen Sie ihn. (Ich habe nicht nur gescrollt, wenn die Zeitspanne auf dem Bildschirm angezeigt wird.) Folgendes habe ich geschrieben:

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

In einigen Fällen funktioniert dies einwandfrei, und in einigen Fällen bleibt zwischen jedem Tastendruck ein nicht unterbrechender Abstand, sodass nur die <span> </ span> -Tags entfernt werden. Irgendwelche Ideen? Ich bin offen für bessere Möglichkeiten, wenn jemand Vorschläge hat. Ich bin ein wenig schockiert darüber, wie schwer es ist, den Cursor erscheinen zu lassen, aber dann ist JS für mich neu.

BEARBEITEN

Dies ist der Code, der funktioniert:

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
}

Das Ansichtsfenster Höhe ist für eine Web-App komplizierter als nötig. Für eine mobile App müssen wir die Tastatur berücksichtigen. Bieten Sie daher eine Methode zum manuellen Festlegen der Ansichtsfensterhöhe sowie die automatische Einstellung über window.innerHeight an.