Textarea counter mit Javascript
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anregung
beispiel
bekommen
code
dank
form
gedanke
hinweis
http
krieg
links anzeigen
mache
paar
position
rad
show
trick
url
zahl
zeichen
-
Hallo Zusammen,
Ich suche einen weg in der unteren rechten ecke eines Textareas eine Zahl einzubinden die sich beim Tippen auf 200 runterzählt mit hilfe von Javascript
<textarea maxlenghth="200" id="msg" rows="8" cols="30"></textarea>
Aber wie mache ich das ganze am besten? :)
LG und danke im vorraus! :) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
menschle schrieb:
Schaue es Dir in diesem Quelltext ab:
http://diehoerbar.net/hbcomm/chat
Aber vermutlich soll das Rad immer wieder neu erfunden werden, ne?
;)
Hallo Menschle!
Vom Grund gedanken her passts aber ich habe es schonmal gesehen das die Zahl innerhalt des textareas unten rechts angezeigt wurde und das textarea nur bis 0 tippbar war und dann auch keine buchstaben mehr dazu gekommen sind.
Hast du vielleicht noch eine andere Quelle der Inspiration? :)
LG -
menschle schrieb:
Schaue es Dir in diesem Quelltext ab:
http://diehoerbar.net/hbcomm/chat
Aber vermutlich soll das Rad immer wieder neu erfunden werden, ne?
;)
menschle hat schon recht, aber da ich immer gerne helfe ist hier ein Beispiel:
HTML:<div><textarea maxlength="200"></textarea><p></p></div>
CSS:
div{position:relative}textarea{position:relative}p{position:absolute;bottom:3px;right:3px}JS:
!function(a){a('textarea').onkeyup=function(){a('p').innerHTML=this.getAttribute('maxlength')-this.value.length}}(function(a){return document.getElementsByTagName(a)[0]})
Nun kurz zu dem Code, ich habe das nicht getestet und mich daran gehalten, das menschle meinte, dass du doch bitte noch mal gugeln solltest. Das JS greift nicht in den globalen Namespace ein, es kann also ohne Bedenken genutzt werden, allerdings funktioniert es auch nur, wenn es genau so vorkommt, andernfalls knallts halt. Du musst also obwohl hier eine Lösung liegt nocheinmal den Code durchsehen und anpassen und viel wichtiger verstehen was passiert
.
Mit freundlichen Grüßen -
nemoinho schrieb:
Das wird in der Form nicht funzen, allerdings ist das Chatscript auch sehr verschachtelt.
da ich immer gerne helfe ist hier ein Beispiel:
[...]
Ne kleine Komplettlösung wäre z.B.:
<html><head><title>Textfield: Show current & max length</title> <style type="text/css"> #text1 { width: 600px; height: 56px; overflow: auto; } </style> <script language="JavaScript"> Hier das Script </script> </head> <body> <div> <textarea id="text1" maxlength="200" onkeypress="jetzt()" onkeydown="jetzt()" onkeyup="jetzt()"></textarea> <span id="count"></span> </div> </body></html>
JavaScript:
function jetzt() { var d = document, take = d.getElementById("text1"), max = take.getAttribute('maxlength'), now = take.value.length; d.getElementById("count").innerHTML = now + " Zeichen von " + max + " verbraucht. " + (max-now) + " noch möglich." }; window.onload = jetzt;
Onlinebeispiel
Beitrag zuletzt geändert: 20.9.2013 15:19:29 von menschle -
Hallo nochmal,
@menschle so in etwa meinte ich das ich muss
jetzt nurnoch die zahl in der unteren linken oder rechten ecke
IN den textarea bekommen.
Doch wie mache ich das?
LG -
menschle schrieb:
Das wird in der Form nicht funzen, allerdings ist das Chatscript auch sehr verschachtelt.
Warum sollte das nicht funktionieren?
Wenn ich die Funktion noch ein wenig kleiner mache sieht meine Komplettlösung so aus (obwohl der TE damit vermutlich nicht viel anfangen kann):<!Doctype html> <html> <head> <style> *{margin:0;padding:0}.a{position:relative;margin:10px;width:400px}#b{width:100%}.a p{position:absolute;bottom:3px;right:3px} </style> <body> <div class="a"><textarea maxlength="200" cols="100" rows="8" id="b"></textarea><p></p></div> <script> !function(a,b,c,d){b=a.nextSibling,d=function(){b.innerHTML=a.maxLength-a.value.length};for(c in a)/onk/.test(c)&&d(a[c]=d)}(document.getElementById('b')) </script>
Zugegeben das ist jetzt übel verstümmeltes HTML aber es funktioniert und das komplette JS ist gerade mal 154 Zeichen lang, viel kürzer gehts nicht mehr, da ich hier schon ein paar Tricks ausgegraben habe um den Code zu verkürzen
Aber bevor ich hier jetzt einen Krieg anzettel möchte ich kurz darauf hinweisen, dass mein Lösungsvorschlag auch mehr als Anregung gedacht war. Der TE sollte einfach selber ein wenig gucken, wie er eine gescheite Lösung aus den Vorschlägen ableiten kann.
Übrigens kann man sich meinen funktionierenden Code auch als Online-Beispiel ansehen.
Mit freundlichen Grüßen
-
nemoinho schrieb:
Weia.. Du bist ja schlimmer als ich, und doch, geht kürzer!
Zugegeben das ist jetzt übel verstümmeltes HTML aber es funktioniert und das komplette JS ist gerade mal 154 Zeichen lang, viel kürzer gehts nicht mehr, da ich hier schon ein paar Tricks ausgegraben habe um den Code zu verkürzen
Aber bevor ich hier jetzt einen Krieg anzettel möchte ich kurz darauf hinweisen, dass mein Lösungsvorschlag auch mehr als Anregung gedacht war.
Ach was, zettelst nix an, außerdem lerne auch ich gerne dazu.
Namst Du für Dein Script unterschiedliche Browser zum testen? Denn bei mir steht beim IE8 rechts unten NaN, und der Chrome zeigt gar keine Zahl an. Beim FF ist alles, wie es soll:
<!Doctype html> <html><head><title>Textfield: Show current & max length</title> <style> *{margin:0;padding:0}.a{position:relative;margin:10px;width:400px}#b{width:100%}.a p{position:absolute;bottom:3px;right:3px} </style> </head> <body> <div class="a"><textarea maxlength="200" cols="100" rows="8" id="b"></textarea><p></p></div> <script> !function(a,b,c,d){b=a.nextSibling,d=function(){b.innerHTML=a.maxLength-a.value.length};for(c in a)/onk/.test(c)&&d(a[c]=d)}(document.getElementById('b')) </script> </body></html>^^ Beispiel
Überarbeitetes Script meiner Version, Zahl steht nun auch unten rechts in der Ecke:
<!Doctype html> <html><head><title>Textfield: Show current & max length</title> <style> #b{width:600px;height:56px;overflow:auto}.a{position:relative;width:600px}.a #e{position:absolute;bottom:3px;right:3px} </style> </head> <body> <div class="a"><textarea maxlength="200" onkeypress="a()" onkeyup="a()" id="b"></textarea><span id="e"></span></div> <script> function a(){d=document,c=d.getElementById('b'),d.getElementById('e').innerHTML=c.getAttribute('maxlength')-c.value.length}a() </script> </body></html>^^ Überarbeitete Version
marvinkleinmusic schrieb:
Teste beide Scripts bitte mal in unterschiedlichen Browsern ;)
Danke dir es klappt! :) habe die Zahl allerdings links anzeigen lassen :)
Beitrag zuletzt geändert: 20.9.2013 22:09:03 von menschle -
Huhu!
@menschle
Hab ich jz grade und ich habe einen schock bekommen als ich gesehen hab das es IE 10 kann aber Chrome nicht rofl.
Ich schaue gleichmal nach wie ich es überarbeite :)
LG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
