javascript - jQuery 计数字符达到限制

Question

如何向函数添加限制(10 个字符)，计数器在达到该限制时停止？

当输入 10 个字符时，chars-counter 停止计数(并显示 10)。如果删除，则会倒数到 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>

Answer 1

1. 用于输入事件 ( 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>