Ergebnis 1 bis 7 von 7

Thema: Textarea-Zeichenzähler

  1. #1
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard Textarea-Zeichenzähler

    So noch ein JS zum zählen und Begrenzen der Zeichen in einer Textarea
    1.: Man bindet charcounter.js ins HTML document ein:
    HTML-Code:
    in den head:
    <script type="text/javascript" langauge="javascript" src="charcounter.js"></script>
    2.: und dann muss IN den <textarea>-Tag folgendes rein:
    HTML-Code:
    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-Code:
    <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;
    }
    5.: um noch die sicherheit zu erhöhen, bekommt das ganze kein <input type="submit"> sondern einen Button mit JS:
    HTML-Code:
    <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-Code:
    <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!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Tobse (20.08.2009 um 18:24 Uhr)
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  2. #2
    Samurai Avatar von Donkey
    Registriert seit
    12.08.2008
    Ort
    München
    Alter
    35
    Beiträge
    237
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Textarea-Zeichenzähler

    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-Code:
    if(strlen($_POST['eingabe']) > '200'){
      
    $error 'Ihr Text ist zu lang! (max. 200 Zeichen)';

    Gruß, Donkey

  3. #3
    Thonixx
    Gast

    Standard AW: Textarea-Zeichenzähler

    Zitat Zitat von Donkey Beitrag anzeigen
    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-Code:
    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-Code:
    if(strlen($_POST['eingabe']) > 200){
      
    $error 'Ihr Text ist zu lang! (max. 200 Zeichen)';
      echo 
    $error;


  4. #4
    Kaiser(in)
    Themenstarter

    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Textarea-Zeichenzähler

    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?
    Geändert von Tobse (19.08.2009 um 21:10 Uhr)
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  5. #5
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Textarea-Zeichenzähler

    Da du es hier immer und immer wieder verkündest:
    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

  6. #6
    Samurai Avatar von Donkey
    Registriert seit
    12.08.2008
    Ort
    München
    Alter
    35
    Beiträge
    237
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Textarea-Zeichenzähler

    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-Code:
    <?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>
    Geändert von Donkey (20.08.2009 um 01:07 Uhr)

  7. #7
    Kaiser(in)
    Themenstarter

    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Textarea-Zeichenzähler

    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
    Geändert von Tobse (20.08.2009 um 18:26 Uhr)
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

Ähnliche Themen

  1. Textarea
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 06.02.2009, 08:48
  2. Textarea
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 14.12.2007, 17:43
  3. Problem bei <textarea>
    Von chris90night im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 01.11.2007, 22:02
  4. Frage zu Textarea
    Von mephan im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 23.08.2006, 11:46
  5. Textarea
    Von DarkAngel im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.06.2005, 14:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •