Ankündigung

Einklappen
Keine Ankündigung bisher.

Zeichenzähler Problem...

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Zeichenzähler Problem...

    Hallo,

    Leider bin ich kein JavaScript-Experte...

    Ich habe hier einen Code, der in einer Textarea die Zeichnen zählt.
    Wenn ich ein Zeichen eingebe, wird der Wert (1.200) subtrahiert.
    Das ist auch alles soweit ok!
    Nur wenn ich ein Zeichen entferne wird der Wert nicht addiert.

    Hast du vielleicht ein Idee wie ich das machen könnte?

    PHP-Code:
    <form name="Formular">
      <
    textarea onkeypress="if (this.value.length == 1200) { window.alert('Bitte nur 100 Zeichen eingeben.'); return false; } else { window.document.forms['Formular'].elements['Anzeige'].value = 1200 - this.value.length; }"></textarea>
      <
    br />
      
    Verbleibende Zeichen: <input type="text" size="4" disabled="disabled" value="1200" name="Anzeige" />
    </
    form

  • #2
    Ich würde onkeyup und textLength verwenden.
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

    Kommentar


    • #3
      HTML-Code:
      <textarea maxlength="50" data-length-o-meter="#length-o-meter"></textarea>
      Verbleibende Zeichen: <output id="length-o-meter">0</output>
      <button type="submit">Senden</button>
      
      <script>
      
      document.querySelectorAll('[data-length-o-meter]').forEach(function(textarea) {
          var selector = textarea.dataset.lengthOMeter;
          var outputs = document.querySelectorAll(selector);
          outputs.forEach(function(output) {
              var maxlength = parseInt(textarea.getAttribute('maxlength'));
              output.value = maxlength;
          });
      
          textarea.addEventListener('input', function() {
              outputs.forEach(function(output) {
                  var maxlength = parseInt(textarea.getAttribute('maxlength'));
                  output.value = maxlength - textarea.textLength;
              });
          });
      });
      
      </script>

      Kommentar


      • #4
        Hi Blar,

        vielen Dank für dein Support! Echt cool der Code...

        Kommentar


        • #5
          Geht aber auch kompakter:
          HTML-Code:
          <div><textarea class="countable" maxlength="100"></textarea>
            <outpout></output></div>
          Code:
          var _countables = document.querySelectorAll( '.countable' );
          
          _countables.forEach( (i) => {
            i.nextSibling.textContent = i.getAttribute( 'maxlength' );
          
            i.addEventListener( 'input', function(e) {
              this.nextSibling.textContent = parseInt(this.getAttribute('maxlength')) - this.textLength;
            });
          });
          Wobei man bei beiden Varianten darauf achten muss, dass die JS-Engine der M$-Browser kein forEach() für eine NodeList kennen.
          Das müsste man dann auf for() umschreiben.
          Competence-Center -> Enjoy the Informatrix
          PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

          Kommentar


          • #6
            Hallo,

            leider hat sich ein neues Problem ergeben (

            Die Codes laufen nicht unter dem Internet Explorer 11 (Updaten geht leider nicht)
            Ich versuche eine Lösung zu finden :O(

            Kommentar


            • #7
              Siehe letzter Absatz in #5
              Competence-Center -> Enjoy the Informatrix
              PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

              Kommentar


              • #8
                Hallo Arne,

                bin kein JS Expert... wie schreib den Code um für IE?

                Kommentar


                • #9
                  Ab IE10 sollte diese Variante funktionieren.
                  HTML-Code:
                      <form>
                          <textarea maxlength="130" cols="50" rows="10">Type something here to see its length.
                          </textarea>
                          <p id="remain"></p>
                      </form>
                  Code:
                  <script>
                      var input = document.querySelector('textarea');
                      var remain = document.getElementById('remain');
                  
                      input.oninput = handleInput;
                  
                      function handleInput(e) {
                        remain.textContent = `Noch ` +
                         (e.target.getAttribute('maxlength') - e.target.value.length) +
                         ` Zeichen zur Verfügung`;
                      }
                  </script>

                  Kommentar


                  • #10
                    Für eine textarea mag das passen, #3 und #5 sind aber auch für multiple ausgelegt. #5 wäre so auch für IE funktional:
                    Code:
                    var _countables = document.querySelectorAll( '.countable' );
                    
                    for ( x=0; x<_coutables.length; x++ ) {
                    
                        _coutables[x].nextSibling.textContent = _coutables[x].getAttribute( 'maxlength' );
                    
                        _coutables[x].addEventListener( 'input', function(e) {
                            this.nextSibling.textContent = parseInt(this.getAttribute('maxlength')) - this.textLength;
                        });
                    
                    }
                    Competence-Center -> Enjoy the Informatrix
                    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                    Kommentar


                    • #11
                      PHP-Code:

                      <!DOCTYPE HTML>
                      <
                      html lang="de">
                      <
                      head>
                      <
                      title>Untitled</title>
                      <
                      script>
                      document.addEventListener('DOMContentLoaded'init);
                      function 
                      init(){
                       var 
                      textarea document.querySelector("#textarea");
                       var 
                      output document.querySelector("#output");
                       var 
                      maxLength textarea.getAttribute("maxlength");
                       
                      output.innerHTML "Noch " parseInt(maxLength textarea.value.length) + " Zeichen.";

                       
                      textarea.addEventListener("keyup", function(){
                       
                      output.innerHTML "Noch " parseInt(maxLength textarea.value.length) + " Zeichen.";
                        });
                      }
                      // -->
                      </script>
                      </head>
                      <body>
                      <p><label id="output"></label></p>
                      <textarea cols="30" rows="10" maxlength="100" id="textarea"></textarea>
                      </body>
                      </html> 

                      Kommentar


                      • #12
                        Günni

                        Das mit dem "keyup" hatten wir schon mal.

                        Seinerzeit habe ich darauf hingewiesen, dass es neben der Tastatur auch möglich ist, Textfelder per drag and drop zu befüllen. Dann passt deine Lösung nicht mehr.

                        Kommentar


                        • #13
                          Außerdem basiert die Variante auf dem Attribut #id und ist wieder nur für eine textarea brauchbar.
                          Competence-Center -> Enjoy the Informatrix
                          PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                          Kommentar


                          • #14

                            Man kann vom Fragesteller ja auch mal ein bißchen Initiative erwarten (Sind zumindest meist eure Worte).

                            Er könnte ja mal auf die Idee kommen danach zu suchen, welche Events man noch abfangen kann und

                            statt "keyup" "input" verwenden. Dann geht auch kein "drag and drop" mehr.

                            Zitat von Arne Drews Beitrag anzeigen
                            Außerdem basiert die Variante auf dem Attribut #id und ist wieder nur für eine textarea brauchbar.
                            Textfelder können kein Attribut id besitzen?

                            PHP-Code:
                            <!DOCTYPE HTML>
                            <
                            html lang="de">
                            <
                            head>
                            <
                            title>Untitled</title>
                            <
                            script>
                            document.addEventListener('DOMContentLoaded'init);
                            function 
                            init(){
                             var 
                            textfeld document.querySelector("#textfeld");
                             var 
                            output document.querySelector("#output");
                             var 
                            maxLength textfeld.getAttribute("maxlength");
                             
                            output.innerHTML "Noch " parseInt(maxLength textfeld.value.length) + " Zeichen.";
                             
                            textfeld.addEventListener("input", function(){
                              
                            output.innerHTML "Noch " parseInt(maxLength textfeld.value.length) + " Zeichen.";
                             });
                            }
                            // -->
                            </script>
                            </head>
                            <body>
                            <p><label id="output"></label></p>
                            <input type="text" id="textfeld" maxlength="5" />
                            </body>
                            </html> 

                            Kommentar


                            • #15
                              eine Textarea - so muss das lesen, es können ja auch mehrere Textareas oder Input-Elemente sein, wo man die noch zur Verfügung stehenden Zeichen wissen will.

                              Kommentar

                              Lädt...
                              X