MaxLength für TextArea

[Elmue]

Hallo

Nach langem Suchen habe ich keinen Code gefunden, der auf schöne Weise die Textlänge einer <TextArea> limitiert.
(Saudämlich genug, dass das im HTML Standard nicht vorgeschrieben ist wie bei <Input maxlength=20>)

Alles was man im Internet findet, ist unschön:
Tippt man zu viele Zeichen ein, so sieht man, wie das letzte Zeichen in der TextArea erscheint und dann vom JavaScript wieder gelöscht wird.

Das Thema ist sehr komlpiziert weil:
1.) Firefox und Internet Explorer Events komplett anders handhaben,
2.) onKeyDown, onKeyPress und onKeyUp sich komplett unterschiedlich verhalten obwohl man die selbe Taste gedrückt hat!
3.) Control Tasten wie Backspace Browser-abhängig anders gehandhabt werden,
4.) event.keyCode Browser-abhängig völlig andere Werte liefert.

Trotz all dieser Hindernisse habe ich nach etlichen Stunden eine Lösung gefunden, dies mit wenigen Zeilen Code sehr elegant zu lösen.

Der Code erzeugt eine <TextArea>, die sich exakt verhält wie <Input maxlength=20>: Werden zu viele Zeichen eingetippt, wird einfach nichts mehr angenommen, ohne dass Zeichen auftauchen, die dann wieder verschwinden. (also so als würde jemand den Stecker der Tastatur rausziehen)

Für das Paste von Text musste ich einen extra Event Handler einbauen, da sich dieser Spezial Fall nicht anders lösen lässt.

Für den Fall, dass ein Browser weder die Events so handhabt wie Firefox noch so wie Internet Explorer, führt das Script nicht zum Blockieren der Eingabe, sondern fällt auf die Methode zurück, die zuviel eingetippte Zeichen nachträglich wieder löscht. (OnKeyUp)

!! Bitte die Kommentare lesen !!

Elmü

<?php  
// *********************************************  
// PHP Framework by Elmü (www.netcult.ch/elmue)  
// *********************************************  
  
// Prints one or multiple Textarea(s) which will limit the text to a maximum length  
// Tested on Firefox 1.5 and 3.0 and Internet Explorer 6.0 and 7.0  
// For details about JavaScript events try the sample at the bottom of the page:  
// www.mediaevent.de/javascript/onkeydown.html  
// on various browsers to study the multiple differences!  
class TextArea  
{  
    static $JavascriptPrinted = false;  
  
    // $Properties = "name='SmsText' style='Width:100%;' rows='4' cols='50' wrap='virtual'"  
    // $Value      = the textarea text to be displayed on load  
    // $MaxLength  = maximum allowed characters  
    // Each textarea in a page can have different MaxLength values  
    public static function PrintIntoForm($Properties, $Value, $MaxLength)  
    {  
?>  
        <Textarea <?=$Properties?> onKeyPress="return OnTextareaKeyPress(event, this, <?=$MaxLength?>);"  
                                   onKeyUp="OnTextareaKeyUp(this, <?=$MaxLength?>);"><?=$Value?></Textarea>  
<?php  
        // Print Javascript functions only once even if there are multiple Textareas in the page  
        if (TextArea::$JavascriptPrinted)  
            return;  
  
        TextArea::$JavascriptPrinted = true;  
?>  
        <script language="JavaScript">  
  
        // ATTENTION: onKeyDown and onKeyUp will NOT work here!!  
        function OnTextareaKeyPress(oEvent, oArea, MaxLen)  
        {  
            Chr = -1;  
            if (window.event) // MSIE (does not fire DEL, BACKSPACE keys)  
            {  
                // event.charCode is undefined on MSIE!!  
                Chr = window.event.keyCode;  
            }  
            else if (oEvent) // Firefox (fires also DEL, BACKSPACE keys with charCode=0)  
            {  
                // oEvent.keyCode returns nonsense but NOT the ASCII code on Firefox!!  
                Chr = oEvent.charCode;  
            }  
  
            // return false to block characters if text too long  
            // return true for all control keys!!  
            return (Chr < 32 || oArea.value.length < MaxLen);  
        }  
  
        // Shorten PASTED texts which cannot be captured in OnTextareaKeyPress()  
        function OnTextareaKeyUp(oArea, MaxLen)  
        {  
            if (oArea.value.length > MaxLen)  
                oArea.value = oArea.value.substring(0, MaxLen);  
        }  
        </script>  
<?php  
    } // end PrintIntoForm()  
} // end class  
?>

[Alexander (HH)]

Moin Moin!

Was passiert ohne Javascript?

Richtig, gar nichts. Die zu lange Eingabe kommt trotzdem zum Server. Dein Code ersetzt also nicht die serverseitige Validierung, die ggf. einen "Text zu lang, bitte nicht so plappern" zum Browser zurückgibt.

Ich sehe natürlich einen Vorteil darin, zu viel Text gar nicht erst zum Server durchzureichen, aber das ist eine reine Luxusfunktion.

PHP ist hierfür übrigens nicht nötig, das läßt sich komplett in Javascript auf dem Client erledigen:

* Suche alle Textareas
* Ermittle deren Maximallänge, z.B. aus einem ungenutzten Universalattribut
* Ignoriere Textareas ohne Maximallängen-Angabe
* Füge den Textareas die notwendigen Eventhandler-Aufrufe hinzu, bevorzugt als anonyme Routinen

Mit JQuery und ähnlichen Libraries dürfte sich das auf ein paar Zeilen beschränken, sonst kommen noch ein zwei oder drei Zeilen rund um document.getElementsByTagName() hinzu.

Alexander

[Elmue]

Hallo

Was passiert ohne Javascript?
Richtig, gar nichts. Die zu lange Eingabe kommt trotzdem zum Server.

Das ist mir völlig klar.
Wo habe ich denn behauptet, dass dies eine serverseite Validierung !ERSETZEN! soll?

Es ist aber wesentlich angenehmer für den Benutzer, wenn er sieht, dass er nichts mehr eintippen kann als erst das ganze Formular abzuschicken und dann die Fehlermeldung zu bekommen, dass im Feld X nur 250 Zeichen erlaubt sind und im Feld Y nur 100 und im Feld Z nur 50. Wie hässlich!

Und was, wenn der User 300 Zeichen eingetippt hat und der Server nur 250 erlaubt? Willst du dem User dann zumuten die Zeichen zu zählen ?

Das geht komfortabel !NUR! mit JavaScript, da die blöden Browser kein Maxlength unterstützen. Allein serverseitg ist das nicht machbar.

Ich finde nicht, dass das Luxus ist.
Ohne Javascript ist es eine Zumutung für den armen User.

Dein Einwand ohne Javascript ist ohnehin rein theoretisch, da heutzutage 95% der Webseiten ohne Javascript gar nicht mehr bedienbar sind. Wozu also sich  den Kopf darüber zerbrechen? Wer heute Javascript abschaltet, kann gleich den Browser deinstallieren!
Meine Seiten benutzen Ajax, da ist Javascript ohnehin Pflicht.

PHP ist hierfür übrigens nicht nötig, das läßt sich komplett in Javascript auf dem Client erledigen:

Offenbar hast du das Thema meines Postings nicht verstanden.
Mein Thema war nicht, eine PHP Klasse zu schreiben (die kannst du einfach entfernen, wenn du in einer anderen Sprache programmierst) sondern ein JavaScript geschrieben zu haben, das besser funktioniert als alles, was ich im Internet zu diesem Thema gefunden habe!

Der Bequemlichkeit halber habe ich dieses Javascript in eine wiederverwendbare elegante PHP Klasse geschrieben.

Wenn du nicht PHP programmierst, kopierst du dir den Javascript Block aus meinen Code und benutzt ihn Stand alone!

* Suche alle Textareas
* Ermittle deren Maximallänge, z.B. aus einem ungenutzten Universalattribut
* Füge den Textareas die notwendigen Eventhandler-Aufrufe hinzu

Ja, und was macht dein automatisch zugefügter Event Hander dann, wenn ein Event kommt?
DAS ist doch genau die Frage!

Elmü

[ChrisB]

Hi,

Das geht komfortabel !NUR! mit JavaScript, da die blöden Browser kein Maxlength unterstützen.

PHP ist hierfür übrigens nicht nötig, das läßt sich komplett in Javascript auf dem Client erledigen:

Offenbar hast du das Thema meines Postings nicht verstanden.

*Du* hast den Themenbereich PHP gewählt ...

Mein Thema war nicht, eine PHP Klasse zu schreiben (die kannst du einfach entfernen, wenn du in einer anderen Sprache programmierst)

Sollte man; auch wenn man seine Seiten serverseitig mit PHP erstellt - denn sie ist schlecht.

sondern ein JavaScript geschrieben zu haben, das besser funktioniert als alles, was ich im Internet zu diesem Thema gefunden habe!

Deshalb sollte der Themenbereich auch eher JavaScript sein.

Und was daran zu verbessern wäre, damit man das auch als halbwegs *zeitgemäßes* JavaScript bezeichnen kann, hat Alexander schon angedeutet (vor allem unobstrusive wäre wünschenswert).

Der Bequemlichkeit halber habe ich dieses Javascript in eine wiederverwendbare elegante PHP Klasse geschrieben.

"Elegant" dürfte in dem Zusammenhang Ansichtssache sein - und ich kann deine kaum teilen.

Nicht XHTML-kompatibele Ausgaben, Script-Element wird einfach irgendwo ins Dokument geschmiert, noch nicht mal notwendiges kontextgerechtes Kodieren der Ausgaben wurde berücksichtigt, Verlass auf short open tags ...

* Füge den Textareas die notwendigen Eventhandler-Aufrufe hinzu

Ja, und was macht dein automatisch zugefügter Event Hander dann, wenn ein Event kommt?
DAS ist doch genau die Frage!

Was ist daran die Frage?

MfG ChrisB

[Der Martin]

Hi,

Es ist aber wesentlich angenehmer für den Benutzer, wenn er sieht, dass er nichts mehr eintippen kann als erst das ganze Formular abzuschicken und dann die Fehlermeldung zu bekommen, dass im Feld X nur 250 Zeichen erlaubt sind und im Feld Y nur 100 und im Feld Z nur 50.

das ist unbestritten. Dennoch kann diese Prüfung nur im Interesse eines gewissen Gewinns an Konfort sein, muss aber trotzdem durch eine serverseitige Prüfung abgesichert sein.

Dein Einwand ohne Javascript ist ohnehin rein theoretisch, da heutzutage 95% der Webseiten ohne Javascript gar nicht mehr bedienbar sind.

Das sehe ich anders: Mein Eindruck ist eher, dass 95% der Webseiten auch ohne Javascript vorzüglich bedienbar sind - manche sogar besser als *mit* Javascript.

Wer heute Javascript abschaltet, kann gleich den Browser deinstallieren!

Ah ja. Ich bin immer wieder froh, *dass* ich Javascript gewohnheitsmäßig abgestellt habe und nur in Ausnahmefällen zulasse.

Mein Thema war nicht, eine PHP Klasse zu schreiben (die kannst du einfach entfernen, wenn du in einer anderen Sprache programmierst) sondern ein JavaScript geschrieben zu haben, das besser funktioniert als alles, was ich im Internet zu diesem Thema gefunden habe!

Ja, das will ich auch gern anerkennen. Das ist aber kein Grund, auf eine vernünftige und sachliche Ausführung so bissig und unhöflich zu reagieren.

Ja, und was macht dein automatisch zugefügter Event Hander dann, wenn ein Event kommt?
DAS ist doch genau die Frage!

Im einfachsten Fall die weitere Standardbehandlung des Events unterbinden, indem er false zurückgibt.

So long,
 Martin