Zeichen in mehreren Textfeldern zählen?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
art
ausgabe
bestehenden buchstaben
code
dynamisch ansprechen
eigene funktion
eingabe
eingetragenen zeichen
einzelne textfeld
einzelnen text
einzelnes textfeld
feld
funktion
input
jeweilige anzahl
tag
test
textfeld
url
zeichen
-
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." <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?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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!) -
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 -
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? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage