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!