用于计算文本区域中字符数的 jQuery 函数未按预期工作

Question

下面的代码用于计算textarea中的字符数。问题是，当我按“enter”键(同时关注 textarea)时，会显示剩余字符，但 textarea 限制已过。有人可以帮我解决这个问题吗？

$(document).ready(function() {
  var text_max = 99;
  $('#textarea_feedback').html(text_max + ' characters remaining');

  $('#textarea').keyup(function() {
    var text_length = $('#textarea').val().length;
    var text_remaining = text_max - text_length;

    $('#textarea_feedback').html(text_remaining + ' characters remaining');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<p id="textarea_feedback"></p>

Answer 1

试试这个

此函数计数达到限制，将不允许输入额外的字符

它只是删除多余的字符。

function countChar(val) {
  var len = val.value.length;
  var text_max = 99;

  if (len >= text_max) {
    val.value = val.value.substring(0, text_max);
    $('#textarea_feedback').text(((text_max - len) + 1) + ' characters remaining - out of limit');
  } else {
    $('#textarea_feedback').text((text_max - len) + ' characters remaining');
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="50" rows="8" id="field" onkeyup="countChar(this)"></textarea>
<div id="textarea_feedback">99 characters remaining</div>