javascript vanilla removeChild a volte rimuove l'intera durata e talvolta no



vanilla js remove all child nodes (1)

Non so se funzionerà su iOS, ma se la posizione del cursore significa che c'è una selezione in quel 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();

Collegamenti rilevanti

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

Sto lavorando su un editor di testo avanzato per iOS e ho la maggior parte di esso funzionante, ma ho problemi infiniti che assicurano che il cursore sia visibile nel viewport quando l'utente inizia a digitare.

Ho trovato un nuovo approccio: inserire una span nella posizione del cursore, scorrere fino allo span e quindi rimuoverlo. (Non riesco a scorrere solo se lo span è sullo schermo.) Ecco cosa ho scritto:

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 alcuni casi questo funziona bene e in alcuni casi lascia uno spazio non interrotto tra ogni tasto premuto, rimuovendo solo i tag <span> </ span>. Qualche idea? Sono aperto a modi migliori per farlo se qualcuno ha dei suggerimenti. Sono un po 'scioccato da quanto sia difficile far apparire il cursore ma poi JS è nuovo per me.

MODIFICARE

Questo è il codice che funziona:

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
}

ViewportHeight è più complicato del necessario per un'app Web. Per un'app mobile dobbiamo tenere conto della tastiera, quindi offri un metodo per impostare viewportHeight manualmente e l'impostazione automatica da window.innerHeight.





removechild