Die Eingabe in Autoresizing Textfeld konzentriert sich weiterhin auf die Oberseite des Elements

Question

Ich habe eine expandierende Textarea. Wenn der Textbereich bereits weit genug erweitert wurde, um den unteren Teil des Fensters zu erreichen, flackert/scrollt der Text an den Anfang des Textbereichs und Sie können die zuletzt eingegebenen Zeichen nicht sehen, es sei denn, Sie scrollen durch das Fenster.

Die Probe kann in diesem jsfiddle gefunden werden. Ich habe versucht,

window.scrollTo(0, document.getElementsByTagName('textarea')[0].getBoundingClientRect().bottom); 

Wie ein scrollTo an den Körper Zugabe kann ich die vom Cursor aus dem Fenster in Textfeld Offset berechnen? Ich dachte daran, den oberen Versatz des Cursors zu bekommen und einfach das Fenster zu seiner Position zu scrollen, wenn der Cursor bereits außerhalb der Falte ist.

Hilfe auf diesem würde sehr geschätzt :)

Answer 1

Ich habe hier im Stack eine Lösung gefunden! https://stackoverflow.com/a/18262927/769326

Ich habe das Code-Snippet dort in der Größenänderungsfunktion auch hinzugefügt.

function resize(e){ 
var text = _this.value, 
    lines = text.split('\n'), 
    cursorPosition = $this.getCursorPosition(), 
    scrollLeft = window.pageXOffset || (document.documentElement || document.body.parentNode || document.body).scrollLeft, 
    scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop; 

    for(var i = 0, length = lines.length; i < length; i++){ 
     if(lines[i].length <= settings.charactersPerLine){ 
      continue; 
     } 

     var j = 0, 
      space = settings.charactersPerLine; 

     while(j++ <= settings.charactersPerLine){ 
      if(lines[i].charAt(j) === ' '){ 
       space = j; 
      } 
     } 

     lines[i+1] = lines[i].substr(space) + (lines[i + 1] || ''); 
     lines[i] = lines[i].substr(0, space); 
    } 

    _this.value = lines.join('\n'); 

    if(cursorPosition == text.length){ 
     setCaretToPos(_this, cursorPosition + 1); 
    } 
    else{ 
     setCaretToPos(_this, cursorPosition); 
    } 

    _this.style.height = elementHeight; 
    _this.style.height = _this.scrollHeight + 'px'; 
    _this.style.overflow = 'hidden'; 

    window.scrollTo(scrollLeft, scrollTop); 
} 

hier ist die jsfiddle

Answer 2

Ich verwende die folgenden für alle Fragen Mausposition und hatte noch nie ein Problem. Ich verstehe nicht, warum es auch für diesen Fall nicht funktionieren würde.

var cX; 
var cY; 
document.onmousemove = function(e){ 
    cX = e.pageX; 
    cY = e.pageY; 
} 

Man kann es benutzen, wie ich habe:

window.scrollTo(0, cX); 

Oder einfach die e.pageX in Ihr Code-Beispiel setzen. cX, cY sind Cursorkoordinaten.

Answer 3

Ihr Code ist großartig - ich habe nur einige Millisekunden Timeout hinzugefügt (etwa 100-200 ist genug) und jetzt verhält es sich gut. Ich habe mich nur gefragt, wofür der Event-Handler on ('focus') ist. Und rate mal, du kannst den Fokus() in der resize() Funktion auslassen ...