jQuery count characters up to limit

Question

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>

What would you want to happen when it hits 10 characters? – jhpratt Jun 07 '18 at 01:15 — jhpratt, Jun 07 '18 at 01:15

score 1 · Answer 1 · answered Jun 07 '18 at 01:16

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);
    }
  });
});

score 1 · Answer 2 · answered Jun 07 '18 at 01:17

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);
  });
});

score 1 · Accepted Answer · answered Jun 07 '18 at 01:27

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>

jQuery count characters up to limit

3 Answers3