kostenloser Webspace werbefrei: lima-city


Textarea counter mit Javascript

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    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! :)
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. m******e

    Schaue es Dir in diesem Quelltext ab:
    http://diehoerbar.net/hbcomm/chat

    Aber vermutlich soll das Rad immer wieder neu erfunden werden, ne?

    ;)
  4. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    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
  5. 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
  6. m******e

    nemoinho schrieb:
    da ich immer gerne helfe ist hier ein Beispiel:
    [...]
    Das wird in der Form nicht funzen, allerdings ist das Chatscript auch sehr verschachtelt.

    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
  7. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    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
  8. 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 :biggrin:

    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
  9. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    Danke dir es klappt! :) habe die Zahl allerdings links anzeigen lassen :)


    :thumbs:
  10. m******e

    nemoinho schrieb:
    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 :biggrin:
    Weia.. Du bist ja schlimmer als ich, und doch, geht kürzer! :biggrin:

    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:
    Danke dir es klappt! :) habe die Zahl allerdings links anzeigen lassen :)
    Teste beide Scripts bitte mal in unterschiedlichen Browsern ;)

    Beitrag zuletzt geändert: 20.9.2013 22:09:03 von menschle
  11. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    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
  12. 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!