kostenloser Webspace werbefrei: lima-city


Zeichen in mehreren Textfeldern zählen?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    firmastart

    firmastart hat kostenlosen Webspace.

    Hallo

    Wie kann ich bei der tag/eingabe">Eingabe in mehrere Textfelder in einem Formular
    die jeweilige Anzahl der Zeichen zählen (und ausgeben) ???

    ich habe ein Script in der Art: (hier BSP mit 5 Textfeldern)

    <form name="form1" method="post" action="index.php">
    
    <?php 
    for ($k=1; $k<6; $k++) {
    $listeinput[$k] = "<br />".$k." &nbsp; <input type=\"text\" name=\"eintrag[$k]\" size=\"100\" value=\"\" /> ";
    } 
    ?>
    
    Speichern: <input type="submit" name="go" value="OK">
    </form>


    also nach den einzelnen Text-Feldern eine Ausgabe der bereits im Feld eingetragenen Zeichen
    quasi Live-Zähler während der Eingabe, der bei Edit die schon bestehenden Buchstaben zeigt.
    Ideen? JS-Funktion und Ausgabe?



  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. l*********n

    Beim "input" Tag das Attribut "onkeypress" mit Funktion, die das Zeichen zu einer globalen Variable dazuzählt und sofort ausgibt.

    Sieh' dir als Beispiel ein ähnliches an: http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#input (sofort unterhalb der Tabelle!)
  4. b****r

    Hallo habe das gleiche oder ein ähnliches Problem

    habe es irgendwie hinbekommen, aber nicht "schön" ...

    weil es ist ja nicht nur ein einzelnes Textfeld, sondern es sind mehrere,
    deren Anzahl variiert und die unabhängig voneinander gezählt werden sollen.

    bis jetzt ... für jedes einzelne Textfeld auch eine eigene Funktion,

    TEST
    <form name="Formular">
    
    <!-- Textfeld 1 -->
    <script type="text/javascript">
    var anzahl1 = 0; function erweitern1 () {  anzahl1 += 1;  document.getElementsByName("Ausgabe1")[0].value = anzahl1; }
    </script>
    <br><input type="text" size="30" name="Eingabe1" onkeypress="erweitern1()"> - <input type="text" size="4" name="Ausgabe1" readonly> 
    
    <!-- Textfeld 2 -->
    <script type="text/javascript">
    var anzahl2 = 0; function erweitern2 () {  anzahl2 += 1;  document.getElementsByName("Ausgabe2")[0].value = anzahl2; }
    </script>
    <br><input type="text" size="30" name="Eingabe2" onkeypress="erweitern2()"> - <input type="text" size="4" name="Ausgabe2" readonly> 
    
    <!-- Textfeld 3 -->
    <script type="text/javascript">
    var anzahl3 = 0; function erweitern3 () {  anzahl3 += 1;  document.getElementsByName("Ausgabe3")[0].value = anzahl3; }
    </script>
    <br><input type="text" size="30" name="Eingabe3" onkeypress="erweitern3()"> - <input type="text" size="4" name="Ausgabe3" readonly> 
    
    <!-- Textfeld 4 -->
    <script type="text/javascript">
    var anzahl4 = 0; function erweitern4 () {  anzahl4 += 1;  document.getElementsByName("Ausgabe4")[0].value = anzahl4; }
    </script>
    <br><input type="text" size="30" name="Eingabe4" onkeypress="erweitern4()"> - <input type="text" size="4" name="Ausgabe4" readonly> 
    
    ... 
    
    </form>


    funktioniert zwar, aber schöner wäre natürlich eine Funktion, die ich "dynamisch" ansprechen kann
    vorallem auch weil die einzelnen Textfelder im Script "dynamisch" als Schleife ausgegeben werden
    es können mal 3 sein aber auch mal 20
    ?!


    Beitrag zuletzt geändert: 23.7.2011 19:11:42 von beeker
  5. l*********n

    So ungefähr müsste es funktionieren:

    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript"><!--
    var summeAllerEingegebenerZeichen = 0;
    function change() {
    	summeAllerEingegebenerZeichen = 0;
    	var inputArray = document.getElementsByTagName("input");
    	for(var i = 0; i < inputArray.length; ++i) {
    		summeAllerEingegebenerZeichen += inputArray[i].value.length;
    	}
    	document.getElementById("ausgabe").innerHTML = "Summe aller eingegebenen Zeichen: " + summeAllerEingegebenerZeichen;
    }
    //--></script>
    </head>
    <body id="_body">
    <form>
    <input type="text" size="10" maxLength="10" onfocus="change()" onkeypress="change()" onblur="change()"><br />
    <input type="text" size="10" maxLength="10" onfocus="change()" onkeypress="change()" onblur="change()"><br />
    <input type="text" size="10" maxLength="10" onfocus="change()" onkeypress="change()" onblur="change()"><br />
    <input type="text" size="10" maxLength="10" onfocus="change()" onkeypress="change()" onblur="change()"><br />
    <input type="text" size="10" maxLength="10" onfocus="change()" onkeypress="change()" onblur="change()"><br />
    <p id="ausgabe">
    Summe aller eingegebenen Zeichen: 0
    </p>
    </form>
    </body>
    </html>



    Allerdings funktioniert es bei "onkeypress" nicht ganz nach Wunsch, sondern es wird erst nachher das letzte Zeichen dazugezählt.

    Weiß jemand wieso?
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!