So erstellen Sie ein automatisch expandierendes TextArea JQuery-Plugin, Teil 1

automatisch wachsende Textbereiche sind auf Websites wie Facebook sehr beliebt. Die Höhe des Textesbereichs des Textbereichs erweitert und schrumpft entsprechend der vom Benutzer eingegebenen Textmenge. Dies hat mehrere Vorteile:

1. Ihr Seitendesign wird nicht von großen Textgebietsfeldern dominiert.
2. Online -Formulare mit mehreren Textbereichen sehen kürzer und einfacher aus.
3. Benutzer können den gesamten Text ohne Scrollen anzeigen.

Die erweiterte Textbereichsdemonstration anzeigen ...

Dieses dreiteilige Tutorial beschreibt, wie ein automatisch erweiterter Textbereich mit HTML und wiederverwendbarem JQuery-Plug-In erstellt wird. Am Ende des dritten Teils werden Sie verstehen, wie es funktioniert und Code hat, die in Ihrem eigenen Projekt verwendet werden können.

Bedarf

Wie alle guten Entwickler sollten wir die Systemanforderungen vollständig verstehen:

1. Jeder Textbereich auf jeder Seite sollte automatisch erweitert werden, wenn wir ihn benötigen.
2. Einige Textbereiche erfordern jedoch möglicherweise keine automatische Expansion.
3. Wir müssen angeben können, dass die Höhe des Textbereichs (a) unendlich wachsen oder (b) innerhalb eines bestimmten Bereichs wachsen kann, beispielsweise die optimale Höhe zwischen 50 und 200 Pixel.
4. Unsere Lösung sollte auf jeder Seite, die wir auswählen, wiederverwendbar sein.
Die
5. fortschrittliche Verbesserungstechnologie sollte verwendet werden, um sicherzustellen, dass Benutzer ohne JavaScript weiterhin das Feld Standardtextbereich verwenden können.
6. Diese Lösung sollte mit IE6, Firefox 2, Oper, Safari und Chrom kompatibel sein.

Vorschlag

Wir implementieren die Lösung als JQuery -Plugin. JQuery wird hauptsächlich für allgemeine Aspekte wie Dom -Sniffing und Event -Delegieren verwendet.

Woher wissen wir jedoch, wann wir den Textbereich und welche Höhe die Größe ändern sollten?

Zunächst können wir jedem Textbereich einen "KeyUp" -Eventhandel zuweisen. Dadurch wird eine Funktion unmittelbar nach dem Drücken der Taste aufgerufen und der Text geändert.

Wir können dann die DOM ScrollHeight -Eigenschaft überprüfen. Dadurch wird die Höhe des internen Scrolling -Teils zurückgegeben, d. H. Die Höhe des vom Benutzer eingegebenen Textes. Wenn wir die Höhe des Textbereichs auf den aktuellen Schriftrollenwert einstellen, wird die Bildlaufleiste irrelevant. Leider ist ScrollHeight keine W3C-Empfehlung, und wir müssen einige Cross-Browser-Inkonsistenzen überwinden:

• In Firefox, Safari und Chrom ist Scrollheight nie kleiner als die Höhe des Textbereichs - auch wenn der Text nicht hinzugefügt wird. Das Box erweitert sich also, aber das Entfernen des Textes schrumpfen ihn nicht. Wir können dieses Problem lösen, indem wir die Höhe des Textbereichs auf 0PX vorübergehend einstellen und dann den tatsächlichen -Regrollenwert anwenden.
Im Gegensatz zur Dokumentation von Mozilla ScrollHeight scheinen Firefox keine Textpolsterung zu enthalten, während Safari 4 und Chrome 2 es enthalten. Wenn wir oben und unten 2PX -Polster haben, wird ScrollHeight im Webkit -Browser 4px größer und die Höhe der Textfläche wächst unendlich. Durch das Subtrahieren der Polsterung wird Firefox gebrochen. Die einfachste Lösung besteht darin, die vertikale Polsterung der 0px auf unsere erweiterten Textbereichselemente anzuwenden.
scrollheight ist in IE und Oper komisch. In der Regel wird die wahre Höhe des internen Textes zurückgegeben. Die Festlegung der Textbereichshöhe auf 0PX gibt jedoch einen falschen Schriftrollenwert zurück. Während Browser -Schnüffeln schrecklich ist, glaube ich nicht, dass wir in diesem Fall andere Optionen haben. Wir müssen sicherstellen, dass IE und Opera die Höhe des Textbereichs niemals auf 0PX einstellen.

Wir müssen auch die Bildlaufleiste berücksichtigen. Standardmäßig zeigen die meisten Browser bei Bedarf nur den Textbereich Scroll -Balken an. Wenn wir jedoch über den Überlauf auf "automatisch" einstellen, wird die Bildlaufleiste angezeigt, wenn wir eine neue Zeile hinzufügen und dann verschwinden, wenn wir die Höhe des Textbereichs ändern. Wenn Sie den Überlauf auf "versteckt" einstellen, wird das Problem der blinkenden Bildlaufleiste behoben. Dies darf jedoch niemals auf nicht erweiterte Textbereiche oder Textbereiche angewendet werden, die über ihre angegebene maximale Höhe hinaus erweitert wurden.

Schließlich kann das Browserfenster die Größenänderung ein Problem sein. Fluid-Webdesign kann Textbereiche mit einer prozentualen Breite implementieren: Die Größenänderung von Windows wird die Größe des Kästchens ändern. Während wir das Fenster -Größenänderung erkennen können, funktioniert das Ereignis in IE schlecht und ruft schnell Handler an. Wir können dieses Problem lösen, aber die Größe mehrerer Textbereiche kann dazu führen, dass das Seitendesign die Benutzer springt und verwirren kann. Nach der Größenänderung werden wir also nur die Höhe des Textbereichs anpassen, nachdem sich der Benutzer auf das Box konzentriert.

Es gibt viele Inhalte zu absorbieren, und es gibt noch mehr! Machen Sie sich eine Tasse Kaffee und machen Sie sich bereit für den zweiten Teil ...

Teil 2: Initialisierung der Textfläche
Teil 3: JavaScript -Plugin -Code
So entwickeln Sie JQuery Plug-In

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein automatisch expandierendes TextArea JQuery-Plugin, Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!