Prototype - Zeichen zählen
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.
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
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.
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.
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.
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 ) +" ";
}
});
|
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>
|
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.
-
Ich arbeite als Webentwickler bei der REGIOCAST GmbH & Co KG, seit Aprill 2008. Dort bin ich zuständig für die Seiten des Radiozentrum Kiel's.
-
Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
-
graphic, motion & web design - kernreaktor - staportal - mukitu
Dieses Feld ist zwingend erforderlich.
Was hat dieses Beispiel mit AJAX (Icon) zu tun?
Und was ist Javaskript? Javascript ist ja eine interpretersprache, die in der Syntax Java ähnelt und außerdem zu einer zeit entwickelt wurde als Java als 'modern' galt. Von Javaskript hingegen hab ich noch nie etwas gehört.
Re: Dieses Feld ist zwingend erforderlich.
hab Javaskript mal zu Javascript geändert...
Sinn und Unsinn
Moin,
ich möchte jetzt mal eine Diskussion anregen, ob das Skript, wie es hier präsentiert wird unter dem Punkt "Usability", so eingesetzt werden sollte oder nicht. Die Möglichkeit dem Benutzer anzuzeigen, wie viele Zeichen er für eine Eingabe noch übrig hat, ist das eine, aber das Skript geht über dies hinaus und schneidet sämtliche Zeichen > 50 willkürlich ab.
Aus meiner Sicht, ist das ein Punkt, der mehr schadet, als das er nützt. Wenn ich einen längeren Text habe (copy/paste zB), bringt mir das gar nichts, wenn der nach x Zeichen abgeschnitten wird. Wenn ich sehe, ich habe 30 Zeichen zu viel, werde ich dir irgendwo einsparen, aber es werden garantiert nicht die letzten 30 Zeichen sein.
Der Zweck des Abschneidens ist ja auch, dass ich meine Daten in eine Form bekomme, die ich verarbeiten kann. Sieht man von der Verarbeitung durch JavaScript ab, muss so oder so noch eine verlässliche Überprüfung auf die Länge durchgeführt werden (serverseitig), die mir sicher sagen kann, wie lang mein String denn nun wirklich ist. JavaScript kann ich ausschalten und ist somit nicht dafür geeignet solche Dinge verlässlich zu prüfen, außer ich baue meine Verarbeitung so auf, dass sie ohne JS gar nicht funktioniert. Ob gewisse Browser(-plugins) es anbieten JS selektiv zu deaktivieren, weiß ich nicht, aber auch so etwas wäre möglich, womit meine Daten manipulierbar bleiben würden.
Trotz dessen ein schöner Artikel, der die Anwendung des Frameworks veranschaulicht.
Re: Sinn und Unsinn
Ich gebe dir volkommen recht, das es nicht bei einer JS Überprüfung bleiben kann. Dieses skript ist wie du schon sagtest eine veranschaulichung des Prototype Frameworks.
Ausgangspunkt für das Skript war, das ich in vielen Foren User nach so einem Skript gefragt/gesucht haben und meineserachtens viel zu komplizierte und nicht Browserübergreifend programmierte Skripte vor die Nase gesetzt bekommen. Will damit zeigen das es auch einfach geht :)