Hi!
Dann habe ich die Idee gelesen, einfach einen allgemeinen Eventhandler zu bastelt, und bei klick oder Focus und passendem tag die Funktion aufzurufen ...
Ja, richtig. Es ist aber nicht nötig, auf den Fokus zu reagieren. Diese Kontextinformation ist zwar nötig, ist aber bei Texteingabe in das Feld bekannt.
- die Funktion für jedes vorhandes textarea-element nach laden der seite einmal aufrufe
Wie du sagst, einmal beim Laden der Seite mit getElementsByTagName('textarea'), querySelector('.klasse') o.ä. alle gewünschten Elemente suchen und ihre Größe anpassen.
- die Funktion bei Änderung des Inhaltes der textarea aufgerufen wird
keyup- und keypress-Events steigen auf (Bubbling). Du kannst sie zentral bei document oder document.body überwachen. Das nennt sich Event Delegation.
var resizeHandler = function(element) {
// was auch immer nötig ist
};
var resizeTextareaOnKeyup = function(event) {
// Kommt der Event von einer textarea?
if (event.target.nodeName === 'TEXTAREA') {
resizeHandler(event.target);
};
};
document.addEventListener('keyup', resizeTextareaOnKeyup, false);
(wie immer ungetestet)
Siehe auch
http://molily.de/js/event-handling-fortgeschritten.html#dom-events
http://molily.de/js/event-handling-objekt.html#currenttarget-target
Man könnte auch mit den Events input oder change arbeiten, um die Logik robuster zu machen.
- die Funktion auch bei dynamisch hinzugefügten textarea greift
Da mit Bubbling gearbeitet wird und die Events zentral beim document überwacht werden, wirkt sich das auch auf nachträglich eingefügte Elemente aus.
PS: JQuery ist keine Alternative!
jQuery ist keine Alternative zu JavaScript, sondern lediglich eine Bibliothek, mit der du vieles, was sich auch in reinem JavaScript umsetzen lässt, einfacher schreiben kannst.
PPS: eine reine CSS-Lösung wäre mir immernoch lieber ;(
Suchst du vielleicht eher contenteditable anstelle einer textarea?
Mathias