CODEWITHSUNDEEP
javascriptjquery
Kyle Underhill
Kyle Underhill

Reputation: 109

jQuery count characters up to limit

How would I add a limit (10 characters) to the function where the counter stops when reached?

When 10 characters are entered, chars-counter stops counting (and 10 would be displayed). If erased, it would count backwards back to 0.

$(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>

Upvotes: 1

Views: 406

Answers (3)

guradio
guradio

Reputation: 15555

  1. use on input event (on input event)

$(document).ready(function() {
  var textarea = $("#my_textarea");
  textarea.on('input',function(event) {
    var numbOfchars = $(this).val();
    var len = numbOfchars.length;
    var text;
    len <= 10 ?  text = len : text = "over"
    $(".chars-counter").text(text);
  });
});
<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>

Upvotes: 1

Francesco
Francesco

Reputation: 499

If you want the counter to stop at 10 but the field to keep working you can edit your code like this:

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

Upvotes: 1

wobsoriano
wobsoriano

Reputation: 13434

You can do something like:

$(document).ready(function() {
  var textarea = $("#my_textarea");
  textarea.keydown(function(event) {
    var numbOfchars = textarea.val();
    var len = numbOfchars.length;
    if (len == 10) {
        e.preventDefault(); // stop when it is 10
    } else {
        $(".chars-counter").text(len);
    }
  });
});

Upvotes: 1

Related Questions