120

Ich möchte Zeichen in einem Textbereich zählen, also habe ich gerade Folgendes gemacht:

<textarea id="field" onkeyup="countChar(this)"></textarea>

function countChar(val){
     var len = val.value.length;
     if (len >= 500) {
              val.value = val.value.substring(0, 500);
     } else {
              $('#charNum').text(500 - len);
     }
};

Was ist los mit meinem Code? Es funktioniert nicht! Nun, das war eine Handschrift für Neulinge, brauche Hilfe.

jquery textarea counter onkeyup Kyle
quelle

Bitte bearbeiten Sie in Zukunft Ihre Frage oder verwenden Sie die Kommentarfunktion unter Antworten, um zusätzliche Informationen oder Erläuterungen hinzuzufügen. Antworten sollten Beiträge sein, die Ihr Problem direkt lösen. Wenn Sie eine Lösung für Ihr eigenes Problem veröffentlichen, akzeptieren Sie Ihre Lösung als die richtige Antwort. Ich habe viele Ihrer "Antworten" entfernt, da Sie eine andere akzeptiert haben.

Tim Post

JQuery Character Limit Counter

Absender

168

Welche Fehler sehen Sie im Browser? Ich kann verstehen, warum Ihr Code nicht funktioniert, wenn das, was Sie gepostet haben, unvollständig war, aber ohne zu wissen, dass ich es nicht sicher wissen kann.

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script>
      function countChar(val) {
        var len = val.value.length;
        if (len >= 500) {
          val.value = val.value.substring(0, 500);
        } else {
          $('#charNum').text(500 - len);
        }
      };
    </script>
  </head>

  <body>
    <textarea id="field" onkeyup="countChar(this)"></textarea>
    <div id="charNum"></div>
  </body>

</html>

... funktioniert gut für mich.

Bearbeiten: Sie sollten wahrscheinlich das charNum div löschen oder etwas schreiben, wenn es über dem Limit liegt.

Caterham
quelle

1

Ja wirklich? Ich habe nur eine Spanne anstelle von div für id = 'charNum', lass es mich noch einmal sehen!

Kyle

Was erwarteten Sie, nachdem Sie Ihren vollständigen Code gesehen hatten, anders zu machen? Was ist daran "kaputt"?

Caterham

Sie können das "else" entfernen, nur weil wir 500 drücken, heißt das nicht, dass wir verhindern sollten, dass #charNum den Wert anzeigt. Das "else" lässt die Zahl bei 1 statt bei 0 anhalten, wie es gerade ist.

Joakim

@ Joakim, ich habe das andere entfernt, aber in diesem Fall bekomme ich negative Zahlen!

Kyle

Fügen Sie dem if möglicherweise einfach etwas hinzu, indem Sie charNum so einstellen, dass "Sie haben das Limit erreicht" oder ähnliches angezeigt wird.

Caterham

83

Verbesserte Version basierend auf Caterhams Funktion :

$('#field').keyup(function () {
  var max = 500;
  var len = $(this).val().length;
  if (len >= max) {
    $('#charNum').text(' you have reached the limit');
  } else {
    var char = max - len;
    $('#charNum').text(char + ' characters left');
  }
});

Keithics
quelle

1

Benutze das nicht. Diese Lösung ist fehlerhaft, wie Etienne Martin hervorhob.

Fabian Bigler

78

⚠️ Die akzeptierte Lösung ist fehlerhaft.

Hier sind zwei Szenarien, in denen das keyupEreignis nicht ausgelöst wird:

Der Benutzer zieht Text in den Textbereich.
Der Benutzer kopiert und fügt Text mit einem Rechtsklick in das Textfeld ein (Kontextmenü).

Verwenden Sie inputstattdessen das HTML5- Ereignis für eine robustere Lösung:

<textarea maxlength='140'></textarea>

JavaScript ( Demo ):

const textarea = document.querySelector("textarea");

textarea.addEventListener("input", event => {
    const target = event.currentTarget;
    const maxLength = target.getAttribute("maxlength");
    const currentLength = target.value.length;

    if (currentLength >= maxLength) {
        return console.log("You have reached the maximum number of characters.");
    }

    console.log(`${maxLength - currentLength} chars left`);
});

Und wenn Sie unbedingt jQuery verwenden möchten:

$('textarea').on("input", function(){
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        console.log(maxlength - currentLength + " chars left");
    }
});

Etienne Martin
quelle

4

Wusste nichts von der inputVeranstaltung. Danke

Abk

Eine kurze Frage (Sie haben Ihren Code / Ihre Methode noch nicht ausprobiert) funktioniert dies für die Spracheingabe?

Syfer

1

@Syfer Auf jeden Fall.

Etienne Martin

Ich werde das ausprobieren. Ich brauchte so etwas für ein kleines Projekt bei der Arbeit.

Syfer

Der obige Code funktionierte in iOS nicht, wenn sowohl JS- als auch jQuery-Sprache verwendet wurden. Irgendwelche Gedanken?

Syfer

9

Das HTML-Beispiel, das überall dort verwendet wird, wo ich einen Zähler benötige, beachtet die Relevanz der IDs des Textbereichs und des zweiten Bereichs: id="post"<-> id="rem_post"und den Titel des Bereichs, der die gewünschte Zeichenmenge für jeden bestimmten Textbereich enthält

<textarea class="countit" name="post" id="post"></textarea>
<p>
  <span>characters remaining: <span id="rem_post" title="1000"></span></span>
</p>

Für die JavaScript-Funktion, die normalerweise zuvor </body>in meiner Vorlagendatei platziert wurde, ist jQuery erforderlich

$(".countit").keyup(function () {
  var cmax = $("#rem_" + $(this).attr("id")).attr("title");

  if ($(this).val().length >= cmax) {
    $(this).val($(this).val().substr(0, cmax));
  }

  $("#rem_" + $(this).attr("id")).text(cmax - $(this).val().length);

});

Humugus
quelle

9

das hat gut funktioniert für mich.

$('#customText').on('keyup', function(event) {
   var len = $(this).val().length;
   if (len >= 40) {
      $(this).val($(this).val().substring(0, len-1));
   }
});

Fatsouls32
quelle

7

substring()muss werden substr().

Beispiel: jsfiddle.net/xqyWV

mattsven
quelle

@MattCurtis: Du solltest deine jsFiddle-Demo lieber im Originalbeitrag posten (um mehr Upvotes zu erhalten und), um sie markierbarer zu machen. Ich habe versucht, Ihren Beitrag zu bearbeiten und den Link einzufügen, aber meine Bearbeitung wurde abgelehnt.

Sk8erPeter

Könnten Sie bitte das vollständige Beispiel posten? Fügen Sie die von Ihnen verwendete jquery-Version hinzu. Das obige Beispiel ist nutzlos. Es tut uns leid!.

Deepcell

@ B4NZ41 Funktioniert gut für mich. Es gibt auch andere Antworten darauf, die es besser ansprechen.

Mattsven

4

Nun, das unterscheidet sich nicht so sehr von dem, was gesagt wurde, aber das funktioniert in allen Browsern sehr gut.

Die Idee ist, jeden Text zu löschen, der die definierte Länge überschreitet.

function countTextAreaChar(txtarea, l){
    var len = $(txtarea).val().length;
    if (len > l) $(txtarea).val($(txtarea).val().slice(0, l));
    else $('#charNum').text(l - len);
    }

Der HTMl-Code wäre:

<div id="charNum"></div>
<textarea onkeyup="countTextAreaChar(this, 10)" class="textareaclass" id="smallword" rows="40" cols="30" name="smallword"></textarea>

Youssef
quelle

4

HTML

<form method="post">
<textarea name="postes" id="textAreaPost" placeholder="Write what's you new" maxlength="500"></textarea>

<div id="char_namb" style="padding: 4px; float: right; font-size: 20px; font-family: Cocon; text-align: center;">500 : 0</div>
</form>

jQuery

$(function(){
    $('#textAreaPost').keyup(function(){
      var charsno = $(this).val().length;
      $('#char_namb').html("500 : " + charsno);
    });
});

Elkingphp
quelle

3

Ich habe eine Kombination der oben genannten gemacht. Es ermöglicht das Anhalten der Texteingabe und den Rückraum sowie die Zählung, auch wenn der Abstand zurückliegt:

JavaScript-Code:

$(document).ready(function () {

  $('#giftmsg').keypress(function (event) {
    var max = 250;
    var len = $(this).val().length;

    if (event.which < 0x20) {
      // e.which < 0x20, then it's not a printable character
      // e.which === 0 - Not a character
      return; // Do nothing
    }

    if (len >= max) {
      event.preventDefault();
    }

  });

  $('#giftmsg').keyup(function (event) {
    var max = 250;
    var len = $(this).val().length;
    var char = max - len;

    $('#textleft').text(char + ' characters left');

  });

});

HTML:

<div class="col3">
    <h2>3. Optional gift message</h2>
    Enter gift message. Limit 250 characters.<br /><br />
    <textarea cols="36" rows="5" id="giftmsg" ></textarea>
    <a style="padding:7px 0 0 0" href="#">Save Message</a>
    <div id="textleft">250 characters left</div>
</div>

Gutschrift zu diesen Plakaten vor mir !! Hoffe das hilft jemandem!

DJH
quelle

3

Ich habe mein eigenes jQuery-Plugin für diese Aufgabe erstellt. Sie können es hier ausprobieren:

http://jsfiddle.net/Sk8erPeter/8NF4r/

Sie können Zeichenzähler im laufenden Betrieb erstellen (und auch verbleibende Zeichenzähler), Sie können definieren, ob Sie Text hacken möchten, Sie können die Suffixtexte definieren und Sie können auch ein Kurzformat und dessen Trennzeichen definieren.

Hier ist ein Beispiel für die Verwendung:

$(document).ready(function () {

    $('#first_textfield').characterCounter();

    $('#second_textfield').characterCounter({
        maximumCharacters: 20,
        chopText: true
    });

    $('#third_textfield').characterCounter({
        maximumCharacters: 20,
        shortFormat: true,
        shortFormatSeparator: " / ",
        positionBefore: true,
        chopText: true
    });

    $('#fourth_textfield').characterCounter({
        maximumCharacters: 20,
        characterCounterNeeded: true,
        charactersRemainingNeeded: true,
        chopText: false
    });

    $('#first_textarea').characterCounter({
        maximumCharacters: 50,
        characterCounterNeeded: true,
        charactersRemainingNeeded: false,
        chopText: true
    });

    $('#second_textarea').characterCounter({
        maximumCharacters: 25
    });

});

Hier ist der Code des Plugins:

/**
 * Character counter and limiter plugin for textfield and textarea form elements
 * @author Sk8erPeter
 */ 
(function ($) {
  $.fn.characterCounter = function (params) {
    // merge default and user parameters
    params = $.extend({
      // define maximum characters
      maximumCharacters: 1000,
      // create typed character counter DOM element on the fly
      characterCounterNeeded: true,
      // create remaining character counter DOM element on the fly
      charactersRemainingNeeded: true,
      // chop text to the maximum characters
      chopText: false,
      // place character counter before input or textarea element
      positionBefore: false,
      // class for limit excess
      limitExceededClass: "character-counter-limit-exceeded",
      // suffix text for typed characters
      charactersTypedSuffix: " characters typed",
      // suffix text for remaining characters
      charactersRemainingSuffixText: " characters left",
      // whether to use the short format (e.g. 123/1000)
      shortFormat: false,
      // separator for the short format
      shortFormatSeparator: "/"
    }, params);

    // traverse all nodes
    this.each(function () {
      var $this = $(this),
        $pluginElementsWrapper,
        $characterCounterSpan,
        $charactersRemainingSpan;

      // return if the given element is not a textfield or textarea
      if (!$this.is("input[type=text]") && !$this.is("textarea")) {
        return this;
      }

      // create main parent div
      if (params.characterCounterNeeded || params.charactersRemainingNeeded) {
        // create the character counter element wrapper
        $pluginElementsWrapper = $('<div>', {
          'class': 'character-counter-main-wrapper'
        });

        if (params.positionBefore) {
          $pluginElementsWrapper.insertBefore($this);
        } else {
          $pluginElementsWrapper.insertAfter($this);
        }
      }

      if (params.characterCounterNeeded) {
        $characterCounterSpan = $('<span>', {
          'class': 'counter character-counter',
          'text': 0
        });

        if (params.shortFormat) {
          $characterCounterSpan.appendTo($pluginElementsWrapper);

          var $shortFormatSeparatorSpan = $('<span>', {
            'html': params.shortFormatSeparator
          }).appendTo($pluginElementsWrapper);

        } else {
          // create the character counter element wrapper
          var $characterCounterWrapper = $('<div>', {
            'class': 'character-counter-wrapper',
            'html': params.charactersTypedSuffix
          });

          $characterCounterWrapper.prepend($characterCounterSpan);
          $characterCounterWrapper.appendTo($pluginElementsWrapper);
        }
      }

      if (params.charactersRemainingNeeded) {

        $charactersRemainingSpan = $('<span>', {
          'class': 'counter characters-remaining',
          'text': params.maximumCharacters
        });

        if (params.shortFormat) {
          $charactersRemainingSpan.appendTo($pluginElementsWrapper);
        } else {
          // create the character counter element wrapper
          var $charactersRemainingWrapper = $('<div>', {
            'class': 'characters-remaining-wrapper',
            'html': params.charactersRemainingSuffixText
          });
          $charactersRemainingWrapper.prepend($charactersRemainingSpan);
          $charactersRemainingWrapper.appendTo($pluginElementsWrapper);
        }
      }

      $this.keyup(function () {

        var typedText = $this.val();
        var textLength = typedText.length;
        var charactersRemaining = params.maximumCharacters - textLength;

        // chop the text to the desired length
        if (charactersRemaining < 0 && params.chopText) {
          $this.val(typedText.substr(0, params.maximumCharacters));
          charactersRemaining = 0;
          textLength = params.maximumCharacters;
        }

        if (params.characterCounterNeeded) {
          $characterCounterSpan.text(textLength);
        }

        if (params.charactersRemainingNeeded) {
          $charactersRemainingSpan.text(charactersRemaining);

          if (charactersRemaining <= 0) {
            if (!$charactersRemainingSpan.hasClass(params.limitExceededClass)) {
              $charactersRemainingSpan.addClass(params.limitExceededClass);
            }
          } else {
            $charactersRemainingSpan.removeClass(params.limitExceededClass);
          }
        }
      });

    });

    // allow jQuery chaining
    return this;

  };
})(jQuery);

Sk8erPeter
quelle

Dadurch werden die Zähler beim ersten Laden nicht aktualisiert, wenn die Elemente bereits Text enthalten. Eine triviale Lösung.

Ravendarksky

2

$.fn.extend( {
       limiter: function(limit, elem) {
            $(this).on("keyup focus", function() {
               setCount(this, elem);
           });
            function setCount(src, elem) {
               var chars = src.value.length;
                if (chars > limit) {
                    src.value = src.value.substr(0, limit);
                    chars = limit;
                }
                elem.html( limit - chars );
            }
            setCount($(this)[0], elem);
        }
    });

    var elem = $("#cntr");  
    $("#status_txt").limiter(160, elem);

Saurabh Chandra Patel
quelle

2

Ich habe mich gefragt, wie ich dasselbe machen soll und Ideen von allen hier zu nehmen. Das habe ich mir ausgedacht:

JsFiddle

<textarea name="message" rows="4" cols="24" maxlength="1000" id="message" placeholder="Message:" style=""></textarea><br/>
<span id="charNum"></span>

$('#message').keyup(function () {
  max = this.getAttribute("maxlength");
  var len = $(this).val().length;
   if (len >= max) {
    $('#charNum').text(' you have reached the limit');
   } else {
    var char = max - len;
    $('#charNum').text(char + ' characters left');
   }
});

bckelley
quelle

1

$(document).ready(function() {
    var count = $("h1").text().length;
    alert(count);
});

Sie können auch Ihre eigene Element-ID oder Klasse anstelle von "h1" eingeben und das Längenereignis zählt Ihre Zeichen der Textbereichszeichenfolge ☻

Parham Rahimpour
quelle

0

Ihr Code war etwas durcheinander. Hier ist eine saubere Version:

<script type="text/javascript">
    $(document).ready(function() {
        $("#add").click(function() {
            $.post("SetAndGet.php", {
                know: $("#know").val()
            }, function(data) {
                $("#know_list").html(data);
            });
        });

        function countChar(val) {
            var len = val.value.length;
            if (len >= 500) {
                val.value = val.value.substring(0, 500);
            } else {
                $('#charNum').text(500 - len);
            }
        }
    });
</script>

Sylvain Guillopé
quelle

Schlau, glauben Sie mir, das funktioniert nicht, es scheint, dass die Funktion, die mit .. function () {.. beginnt, außerhalb von $ (document) .ready (function () {

Kyle

0

Probier diese.

<textarea maxlength="410" name="about_me" onkeydown="CountLeft(this.form.about_me, this.form.left);" onkeyup="CountLeft(this.form.about_me,this.form.left); "></textarea>

<input maxlength="3" name="left" readonly="" size="3" type="text" value="410" /> characters left

<script>
function CountLeft(field, count) 
{
    var max = "410";
    if (field.value.length > max)
    {
        field.value = field.value.substring(0, max);
    }
    else
    {
        count.value = max - field.value.length;
    }
}
</script>

Hardik
quelle

0

Eine allgemeinere Version, damit Sie die Funktion für mehr als ein Feld verwenden können.

<script src="../site/jquery/jquery.min.js" ></script>
<script type="text/javascript">

function countChar(inobj, maxl, outobj) {
    var len = inobj.value.length;
    var msg = ' chr left';
    if (len >= maxl) {
        inobj.value = inobj.value.substring(0, maxl);
        $(outobj).text(0 + msg);
    } else {
        $(outobj).text(maxl - len + msg);
    }
}


$(document).ready(function(){

    //set up summary field character count
    countChar($('#summary').get(0),500, '#summarychrs'); //show inital value on page load
    $('#summary').keyup(function() {
        countChar(this, 500, '#summarychrs'); //set up on keyup event function
    });

});
</script>

<textarea name="summary" id="summary" cols="60" rows="3" ><?php echo $summary ?></textarea> 
<span id="summarychrs">0</span>

Lumis
quelle

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script>

            function countChar(val) 
            {

             var limit = 1024;

            if ( val.length > limit )
              { 
              $("#comment").val(val.substring(0, limit-1));
              val.length = limit;
              }

              $("#count").html((limit)-(val.length));     
              }

        </script>

        <textarea id="comment" onKeyUp="countChar(this.value)" required></textarea>

        <div id="count"></div>

Verwenden Sie Folgendes, um die Verwendung von else zu überspringen und auch das Abrufen einer negativen Anzahl zu überspringen.

Shiva Charan
quelle

0

Hier mein Beispiel. Abendessen einfach

$(document).ready(function() {
      
        var textarea    = $("#my_textarea");
  
        textarea.keydown(function(event) {
          
            var numbOfchars = textarea.val();
            var len = numbOfchars.length;
            $(".chars-counter").text(len);

        });
  
  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="my_textarea" class="uk-textarea" rows="5" name="text"></textarea>
<h1 class="chars-counter">0</h1>

Erweitern Sie das Snippet

Ivan Milincic
quelle

0

Wir waren mit keiner der beabsichtigten Lösungen zufrieden.

Deshalb haben wir für JQuery eine komplette Char Counter-Lösung entwickelt, die auf jquery-jeditable basiert . Es ist eine textareaPlugin-Erweiterung, die in beide Richtungen zählen kann, eine benutzerdefinierte Nachricht anzeigt, die Anzahl der Zeichen begrenzt und auch jquery-datatables unterstützt .

Sie können es sofort auf JSFiddle testen .

GitHub-Link: https://github.com/HippotecLTD/realworld_jquery_jeditable_charcount

Schnellstart

Fügen Sie diese Zeilen zu Ihrem HTML hinzu:

<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/[email protected]/dist/jquery.jeditable.charcounter.realworld.min.js"></script>
<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/[email protected]/dist/jquery.charcounter.realworld.min.js"></script>

Und dann:

$("#myTextArea4").charCounter();

Vaiden
quelle

-1

$('#field').keyup(function () {
    var max = 160;
    var len = $(this).val().length;
//  var char = max - len;
    var messages = Math.ceil(len / 160);
    if (len >= max) {
        $('#charNum').text('(' + messages + ') ' + len + '/' + max);
    } else {
        $('#charNum').text(len + '/' + max);
    }
    });

Himali Kosty
quelle

-1

Sie können verwenden:

    $(document).ready(function () {
  $('#ID').keyup(function () {
   var val = $(this).val();
   len = val.length;
   if (len >= 140) {
    $(this).text(val.substring(0, 140));
   } else {
    console.log(140 - len);
    $('#charNum').empty().append(140 - len);
   }
  });
 });

demenvil
quelle

Zählen Sie die Zeichen im Textbereich

Antworten:

⚠️ Die akzeptierte Lösung ist fehlerhaft.

Schnellstart