Textfeld zur Cursorposition scrollen
FordPrefect
- javascript
Hallo,
ich bastele gerade an einem Javascript das Text an der Cursorposition einfügt. Ich habe es auch so weit hinbekommen das der ganze Spaß wunderbar funktioniert, nicht zuletzt mit Hilfe des entsprechenden Artikels hier http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/index.htm. Nun arbeite ich noch an einer kleinen Komfort-Erweiterung, nämlich das der Cursor nach dem Einfügen automatisch hinter das eingefügte gesetzt wird. Auch so weit klappt das ganze noch. Aber leider setzt der Mozilla nur den Cursor an die entsprechende Stelle, scrollt aber nicht das Textfeld an die entsprechende Position. Nun ist es doch recht nervig wenn man immernoch den Cursor suchen muss (oder aber durch das einfügen und dann wieder entfernen eines Buchstabens an die entsprechende Position kommt).
Wie schaffe ich es das das Textfeld im Mozilla sich automatisch an die entsprechende Position scrollt?
Diese Frage wurde hier im Forum unter dem Datum 20. 01. 2005, 15:21 gefunden, nur dass dort leider damals keiner die Antwort wusste, jedenfalls ist die Frage unbeantwortet geblieben. Vielleicht ist ja mittlerweile jemand so weit, darauf einen kleinen Tipp zu geben.
Ich würde mich sehr freuen.
ich bastele gerade an einem Javascript das Text an der Cursorposition einfügt.
Wie schaffe ich es das das Textfeld im Mozilla sich automatisch an die entsprechende Position scrollt?
Ich mache das ungefähr so:
textarea.ersetzen = function(neu, anfang, ende, markieren) {
// neu: Einzufügender Text
// anfang, ende: Start und Ende der Ersetzung, anfang = ende: Einfügen
// markieren: eingefügten Textblock auswählen
// aktuelle Anzeigeposition sichern
var scrollTop = this.scrollTop;
// neuen Text einfügen
this.value = this.value.substr(0, anfang) + neu + this.value.substr(ende, this.value.length);
// Cursor setzen
this.selectionEnd = anfang + neu.length;
if (markieren) {
this.selectionStart = anfang;
}
else {
this.selectionStart = anfang + neu.length;
}
// Ansicht verschieben, wenn nötig
if (this.clientHeight >= this.scrollHeight) { // Text ist kürzer als Eingabefeld, Cursor muss also sichtbar sein
// dementsprechend nüscht tun
}
else if (this.selectionStart < this.value.length - 1) { // Cursor steht irgendwo im Text (lies: nicht ganz am Ende)
var i;
if (i = neu.match(/(\r\n|\n|\r)/g)) { // hinzugekommene Zeilen zählen
this.scrollTop = scrollTop + Math.floor(this.clientHeight / this.rows) * i.length;
/*
clientHeight / rows entspricht ungefähr der
Pixelhöhe einer Zeile (es mag eine exaktere Quelle geben, aber bei
mir funktioniert es auch bei langen Texten sehr gut). Dies
multipliziert mit der Anzahl neuer Zeilen ergibt die Pixelzahl x,
um die die Ansicht weiter runtergeschoben werden muss (scrollTop + x),
um den am Ende des neuen Blocks stehenden Cursor wieder sichtbar
zu machen.
*/
}
}
else { // Cursor steht am Ende des Textes
this.scrollTop = this.scrollHeight - this.clientHeight;
}
}
<textarea>.clientHeight beschreibt die Pixelhöhe des Elements in der Seite, .scrollHeight die des enthaltenen Textes, .scrollTop schließlich die Pixelposition, an der der Text derzeit angezeigt wird.
Vielen Dank für Deine Antwort!
Ich muss wohl die Karten auf den Tisch legen:
Mir ist nicht klar, wie ich Deinen Code einsetzen kann. Ich verstehe ihn nicht.
Wahrscheinlich nicht deswegen, weil er schlecht kommentiert ist. Bestimmt, sogar ganz bestimmt, eher deswegen, weil ich in Javascript, ich sag mal, mäßig bewandert bin. Das ist für mein Projekt auch nicht notwendig aber hinderlich, wenn ich ein hübsches javasrcipt-feature, wie eben das Script, was es hier gibt: http://aktuell.de.selfhtml.org/artikel/javascript/bbcode, komfortabel für den User einsetzen möchte. Dazu gehört, dass das Textfeld dort positioniert ist, wo nach dem Einfügen eines Tags der Cursor steht. Bei IE funtioniert das einwandfrei, ich bin aber irgendwie ein Freund von Morzilla Firefox geworden und möchte diesen Browser auch dazu bewegen, genauso schön zu funktionieren.
Vielleicht hast Du ja die Muße, das wäre ein wirklich von mir hochgeschätzter Zug von Dir, mir Dein Script zu erläutern, orzugsweise so, dass es zusammen mit dem oben erwähnten Script funktioniert und ganz besonders vorzugsweise, ohne dass ich etwas ändern müsste, weil, wie erwähnt, meine Programmierstärken in anderen Bereichen als Javascript liegen.
Ich verlange viel, ich weiß, aber ich würde, das verspreche ich, Deine Tipps in einem ihnen würdigen Projekt verwenden. Und ich glaube, so das Ergebnis meiner Google-Recherche, es gäbe auch andere danbare Abnehmer für Dein Wissen.
Mit Dank im Voraus.