nach Einfügung in TextArea zurückscrollen verhindern
Felix Riesterer
- javascript
Liebe Selfer,
ich ergänze mit Javascript Inhalt in einer Textarea. Nach dieser Ergänzung "verrutscht" mir der Inhalt dieser Textarea an den Anfang, was bei längeren Inhalten extrem störend wird. Wie erreiche ich,
dass entweder
a) der Browser (MSIE>4, NS>4.x, opera egal) _nicht_ zurückscrollt,
oder
b) ich per Javascript wieder vor zur Position des Cursors scrolle?
Einen ersten ernüchternden Eindruck aus dem Archiv habe ich schon ("... es geht wohl nicht!"), aber auch einen Hinweis, wie man das mit MSIE4+ schaffen könnte.
Der Artikel ist hier zu finden. Da dort aber document.all verwendet wird, hier eine kleine Abwandlung:
----------------------------------------------------------------------------
<HTML><HEAD><TITLE>TextArea scrolling in IE4+</TITLE>
<SCRIPT>
function scrollToTop (element) { element.scrollTop = 0; }
function scrollToBottom (element) { element.scrollTop = element.scrollHeight; }
function setCaretToStart (input) {
if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.select();
}
}
function setCaretToEnd (input) {
if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(false);
range.select();
}
}
</SCRIPT>
<SCRIPT>var i = 3;</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" VALUE="addLine and scroll to bottom" ONCLICK="document.getElementById('aTextArea').value += '\n' + i++ + ': Kibology'; scrollToBottom(document.getElementById('aTextArea'));">
<INPUT TYPE="button" VALUE="addLine and set caret to end" ONCLICK="document.getElementById('aTextArea').value += '\n' + i++ + ': Kibology'; setCaretToEnd(document.getElementById('aTextArea'));">
<BR>
<INPUT TYPE="button" VALUE="scroll to top" ONCLICK="scrollToTop(document.getElementById('aTextArea'));">
<INPUT TYPE="button" VALUE="scroll to bottom" ONCLICK="scrollToBottom(document.getElementById('aTextArea'));">
<BR>
<INPUT TYPE="button" VALUE="set caret to start" ONCLICK="setCaretToStart(document.getElementById('aTextArea'));">
<INPUT TYPE="button" VALUE="set caret to end" ONCLICK="setCaretToEnd(document.getElementById('aTextArea'));">
<BR>
<TEXTAREA ID="aTextArea" ROWS="3" COLS="20" WRAP="soft">1: Kibology
2: Kibology</TEXTAREA>
</BODY>
</HTML>
----------------------------------------------------------------------------
Mein Firefox macht (noch) nicht das, was der MSIE (schon) tut... Gibt es wirklich keine Lösung?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Liebe Selfer,
es scheint so, als ob sich der MSIE6 mit einem doppelten document.meine_textarea.focus() zufrieden gibt, wenn man die Ersetzung/Einfügung (Range) selektiert lässt. Da scrollt nix!
Aber der Mozilla... Bin immer noch auf der Suche. Dieses scrollIntoView() tut ja leider nur beim window-Objekt. Meine Versuche es auf selection oder selectionStart oder sowas anzuwenden sind bisher gescheitert.
Wer weiß Rat?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Liebe Selfer,
habe immer noch nix gefunden... Aber mein MSIE6 scrollt nicht automatisch an den Anfang zurück. Das war ein Irrtum. Nur mein Firefox tut das (leider!!). Zu Allen meinen Versuchen meldet die JS-Konsole im FF nur Meldungen à la "xyz has no properties", oder "abc is no function".
Wenn wer was weiß, immer her damit!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Lieber Siechfred,
vielen Dank für Deinen Tipp, aber da war ich schon. Meine "Einfüge"-Funktionen basieren auf denselben Mechanismen. Daher konnte mir Dein Beispiel nix neues vermitteln. Mein Code-Beispiel im ersten Posting zu diesem Thread war bereits der zweite Versuch...
Mit Mozilla scheint das einfach nicht möglich zu sein. Der MSIE lässt sich ja zum Anfang, bzw. bis zum Ende in seiner Textarea "spulen". Dazwischen könnte man versuchen das "caret", also die Cursorposition mitten hinein zu versetzen, aber ob das den Text in der Textarea in den sichtbaren Bereich rückt...
Der Mozilla kann garnichts in dieser Hinsicht. Da habe ich auf der mozdev-Seite in den Dokumentationen einfach nix gefunden. Da gibt es ein Range-Objekt, da gibt es window.getSelection() (was aber nur Markierungen auf der Seite außerhalb von Textareas findet, Input-Felder habe ich nicht ausprobiert), da gibt es scrollIntoView() (was auch nur für das ganze Dokument gilt), aber nix, was mir weiterhelfen will.
Ich will den eingefügten Text markiert lassen, daher fallen Funktionen zum Cursor-setzen wohl eher weg...
Liebe Grüße aus Ellwangen,
Felix Riesterer.