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  
?>