Textarea-Zeichenzähler

Tobse

So noch ein JS zum zählen und Begrenzen der Zeichen in einer Textarea
1.: Man bindet charcounter.js ins HTML document ein:

HTML

in den head:
<script type="text/javascript" langauge="javascript" src="charcounter.js"></script>

2.: und dann muss IN den <textarea>-Tag folgendes rein:

HTML

onkeyup="countchar('textbox', 200, 'kontakt', 'fehler-alert');" onkeydown="countchar('textbox', 200, 'kontakt');"

hier steht das 'textbox' für die ID der Textarea, also nich vergessen, der eine zu geben.
Das 200 steht für die Maximale Anzahl an zu verwendenden Zeichen, das Bitte Eidtieren.
Das 'kontakt' steht für den Namen des Formulars, auch hier bitte editieren.
Das 'fehler-alert' steht für die ID des Divs, der auftaucht, wenn die 200 Zeichen überschritten wurden. Dazu in 6..
3.: Um die zu verbleibenden Zeichen auszugeben, brauchen wir noch ein <input>-Tag:

HTML

<input type="text" name="left" id="left" value="200" onfocus="ausgval=value;" onblur="value=ausgval;">

Bitte in diesem Code NICHTS verändern.
4.: Und um das ganze noch schön zu bekommen, muss in den Head oder in das Stylesheet folgendes:

Code

Head:
<style type="text/css">
#left {
 border: none;
 background: white;
 width: 2em;
}
</style>
ins stylesheet:
#left {
 border: none;
 background: white;
 width: 2em;
}

Alles anzeigen

5.: um noch die sicherheit zu erhöhen, bekommt das ganze kein <input type="submit"> sondern einen Button mit JS:

HTML

<input type="button" value="Senden" onclick="this.submit()">

jedoch ist es besser, immer noch PHP dahinter zu haben. Mit JS geht es lediglich eleganter.
6.: Nun brauchen wir nurnoch eine Fehlermeldung für den Fall, dass die Maximalen zeichen überschritten werden.
Dazu habe ich hier etwas parat, das kann aber noch geändert werden. Auf jeden Fall muss dazu in das oben angelegte Stylesheet oder Head-Style-Element noch folgendes:

Code

#fehler-alert {
 border: 1px solid #000000;
 background: #FFFFFF;
 width: 350px;
 height: 80px;
 position: absolute;
 top: 300px;
 left: 200px;
 display: none;
}

und in den HTML-Code muss dann folgendes:

HTML

<div id="fehler-alert">
<center>
<a>Es dürfen nur 200 Zeichen verwendet werden.</a>
<br>
<!-- bitte den code in den Kommentaren NICHT ändern, danke -->
<input type="button" value="OK" onclick="global_alertt.style.display='none';">
<!-- Nicht-änder-Zone Ende -->
</center>
</div>

Hier noch ein Demo-Link.
Viel Spass!
Auch hier bitte ich um Feedback!

Donkey

Noch ein kleiner Hinweis für diejenigen die lieber "bequem" als effizient coden:

Das ist ein schönes Script, aber bei Formulareingaben sollte man sich nie allein auf JavaScript verlassen!
D.h. die Eingabe trotzdem mit PHP prüfen um Überraschungen zu vermeiden

z.B.

PHP

if(strlen($_POST['eingabe']) > '200'){
  $error = 'Ihr Text ist zu lang! (max. 200 Zeichen)';
}

Gruß, Donkey

Thonixx

Zitat von Donkey
Noch ein kleiner Hinweis für diejenigen die lieber "bequem" als effizient coden:

Das ist ein schönes Script, aber bei Formulareingaben sollte man sich nie allein auf JavaScript verlassen!
D.h. die Eingabe trotzdem mit PHP prüfen um Überraschungen zu vermeiden

z.B.
PHP
if(strlen($_POST['eingabe']) > '200'){
  $error = 'Ihr Text ist zu lang! (max. 200 Zeichen)';
}
Gruß, Donkey

strlen ist IMMER ein Integer, das bedeutet, die 200 dürften theoretisch nicht in den Anführungszeichen stehen..

So:

PHP

if(strlen($_POST['eingabe']) > 200){
  $error = 'Ihr Text ist zu lang! (max. 200 Zeichen)';
  echo $error;
}

Tobse

Oh, das habe ich vergessen. Man darf das Formular danneben auch nur üner JS verschicken. Ich mach das immer so, ich lass den User die Eingaben machen und wenn er es verschicken will, kommt JS und weist ihn, falss nötig, in die schranken. Die action, das method und das enctype Attribut werden sogar auchnoch über JS gesichert. Ansonsten kann das Formular nur über Firebug gesubmitted werden, aber PHP hab ich trotzdem Dahinter. Aber, zur erhöhten sicherheit, siehe EDIT des ersten Beitrags.
Und was haltet ihr vom Box Resizer?

jojo87

Da du es hier immer und immer wieder verkündest:

Zitat

Man darf das Formular danneben auch nur üner JS verschicken

Das ist einfach nur falsch. Das bringt dir null an Sicherheit.
Das Formular kann nicht nur über Firebug verschickt werden, ich kann es, wenn ich denn will, auch von einem x-beliebigen Formular, welches ich mir auf einen eigenen Webspace lege, verschicken.
Auch das "Absichern" des Action-Attributes über js bringt keine Punkte, da es js ist. Und js kann ich mir angucken.

Verabschiede dich von dem Irrglauben, Formulare per Javascript auch nur ansatzweise vernünftig absichern zu können.

@Topic: An sich nettes Snippet. Aber da mir beim Testen grade der Browser abgestürzt ist noch der Hinweis, dass du statt des alerts evtl. doch lieber einen confirm-Dialog nimmst
Oder, noch besser, absichern, dass nur 1 Alert kommt, wenn du 200 Zeichen überschritten werden.

Gruß,
jojo

Donkey

Das stimmt schon.
JavaScript ist bei Sachen die möglichst bei jedem funzen sollen und gerade im Bezug auf Sicherheit "unzuverlässig".

Hab mal ein Beispiel geschrieben wie man das benutzerfreundlich hinbekommt.

PHP

<?php
if (isset($_POST['set'])){
    if(strlen($_POST['message']) > 200){
        echo'Ihr Text ist zu lang! (max. 200 Zeichen)';
    }
}
?>


<form action="index.php" id="kontakt" method="post">
  <label for="message">Ihre Nachricht: <noscript>(Max. 200 Zeichen)</noscript></label>
  <div>
    <textarea onkeyup="countchar('message', 200, 'kontakt');" onkeydown="countchar('message', 200, 'kontakt');" name="message" id="message" rows="5" cols="40"></textarea>
    <script>document.write ('<br>Noch <input type="text" name="left" id="left" value="200" onfocus="ausgval=value;" onblur="value=ausgval;"> Zeichen')</script>
  </div>

  <input type="submit" name="set" value="Senden">
</form>

Alles anzeigen

Tobse

Ja, ich weiss Jojo. ICh habs aj auch gesagt, ich hab enben noch PHP dahinter und das sollte man auch haben. Sonst kann dich eben jeder Zuspammen. UNd wiso stürzt bei dir der Browser ab?? Bei mir kommt im IE, FF, Oper und Chrome nur eine Alert-Box. Welchen Bowser benutzt du denn?
EDIT:
Hab den Alert durch einen Div ersetzt. Und jetzt müsste er sich auch nur 1mal bei dir display="block"-en, jojo

Tags