Prototype - Zeichen zählen

0 | 9582 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Prototype - Zeichen zählen" mit Ihrem Wissen!

Anzeige Hier werben

Vorbereitung

Als erstes solltet Ihr Grundwissen über Javascript und Prototype haben. Fals nicht, empfehle ich euch, dass Tutorials "Prototype - Allgemeines" durchzulesen.
Dort werden alle grundlegenden Methoden des Prototype-Frameworks erklärt.

Als nächstes brauchen wir ein Textfeld und ein Element, in der später die Ausgabe der Aktuell noch vorhandenen Zeichen steht.

Grundgerüst  
HTML
1
2
<textarea rows="10" id="textarea" name="text" cols="30"></textarea>
<br />noch <span class="counttarget"></span> Zeichen übrig!

Der Textarea geben wir die ID "textarea" und zusätzlich habe ich ein Element für die Ausgabe ( Hier: "<span>" mit der Klasse "counttarget").

Javascript

 
JavaScript
1
2
3
4
5
document.observe('dom:loaded', function () {
    var elTextarea      = $('textarea');
    var elCountTarget   = $$('.counttarget').first();
    var maxLength       = Number("50");
});

Wir definieren nun die gebrauchten Variablen. Da das Dokument geladen wurde, muss nun schon die maximale Anzahl der Zeichen angezeigt werden. Dazu schreiben wir einfach den Wert der Maximalenlänge in unsere Ergebniszeile.

 
JavaScript
1
2
3
4
5
6
7
document.observe('dom:loaded', function () {
    var elTextarea      = $('textarea');
    var elCountTarget   = $$('.counttarget').first();
    var maxLength       = Number("50");

    elCountTarget.innerHTML = Number(maxLength) + " ";
});

Die beste Möglichkeit um herauszufinden, wie viele Zeichen in dem Textfeld schon geschrieben wurden, ist dass überwachen des Tastendrucks ("keyup"). Für jeden Tastenanschlag ermitteln wir den Wert der in der Textarea steht und zählen die Zeichen. Wenn der Wert an Zeichen in der Textarea unseren maximal Wert überschreitet, kürzen wir einfach mit der Javascript funktion substring den Value der Textarea und schreiben in die Ergebniszeile eine Null.
Fals dies nicht der Fall sein sollte, schreiben wir bei jedem Tastenanschlag die Anzahl an Zeichen in unsere Ergebniszeile.

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
document.observe('dom:loaded', function () {
    var elTextarea      = $('textarea');
    var elCountTarget   = $$('.counttarget').first();
    var maxLength       = Number("50");

    elCountTarget.innerHTML = Number(maxLength) + " ";

    elTextarea.observe('keyup', function () {
        if( elTextarea.value.length >= maxLength ) {
            elTextarea.value = elTextarea.value.substring(0,maxLength);
            elCountTarget.innerHTML = "0";
        } else {
            elCountTarget.innerHTML = Number( maxLength-elTextarea.value.length ) +" ";
        }
    })
});

Wenn die Seite jetzt Aktualisiert wird, würde in der Ergebniszeile wieder 50 stehen obwohl schon Text in der Textarea steht. Deshalb ergänzen wir einfach die If-Anweisung aus der Observe-Methode und schreiben Sie einfach noch dahinter. Nun wird beim Aufrufen der Seite die If-Anweisung ausgeführt und schreibt den Wert in die Ergebniszeile.

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.observe('dom:loaded', function () {
    var elTextarea      = $('textarea');
    var elCountTarget   = $$('.counttarget').first();
    var maxLength       = Number("50");

    elCountTarget.innerHTML = Number(maxLength) + " ";

    elTextarea.observe('keyup', function () {
        if( elTextarea.value.length >= maxLength ) {
            elTextarea.value = elTextarea.value.substring(0,maxLength);
            elCountTarget.innerHTML = "0";
        } else {
            elCountTarget.innerHTML = Number( maxLength-elTextarea.value.length ) +" ";
        }
    })
    
    if( elTextarea.value.length >= maxLength ) {
        elTextarea.value = elTextarea.value.substring(0,maxLength);
        elCountTarget.innerHTML = "0";
    } else {
        elCountTarget.innerHTML = Number( maxLength-elTextarea.value.length ) +" ";
    }
});

Beispiel:  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="http://prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js"></script>
<script type="text/javascript">
document.observe('dom:loaded', function () {
    var elTextarea      = $('textarea');
    var elCountTarget   = $$('.counttarget').first();
    var maxLength       = Number("50");
    
    elCountTarget.innerHTML = Number(maxLength) + " ";
    
    elTextarea.observe('keyup', function () {
        if( elTextarea.value.length >= maxLength ) {
            elTextarea.value = elTextarea.value.substring(0,maxLength);
            elCountTarget.innerHTML = "0";
        } else {
            elCountTarget.innerHTML = Number( maxLength-elTextarea.value.length ) +" ";
        }
    })
    
    if( elTextarea.value.length >= maxLength ) {
        elTextarea.value = elTextarea.value.substring(0,maxLength);
        elCountTarget.innerHTML = "0";
    } else {
        elCountTarget.innerHTML = Number( maxLength-elTextarea.value.length ) +" ";
    }
});

</script>
</head>
<body>

<textarea rows="10" id="textarea" name="text" cols="60"></textarea>
<br />noch <span class="counttarget"></span> Zeichen übrig!
</body>
</html>

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "Prototype - Zeichen zählen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Prototype - Zeichen zählen" hier bearbeiten.

Mitarbeiter