达到一定字符数后如何防止输入到文本区域？

Question

使用下面的代码，任何超过指定最大值的输入都会被删除。但这会产生一种效果，即输入一个字符然后立即删除。我宁愿简单地阻止输入字符。

<textarea  id="textarea" onKeyDown="limitText()" onKeyUp="limitText()">
</textarea> 
<span name="charcount_text" id="charcount_text"></span>

  <script type="text/javascript">
    function limitText() {
      var count = document.getElementById('textarea').value.length;
      var remaining = 4000 - count;
      if(remaining <= 0) {
        document.getElementById('charcount_text').innerHTML = '4000 character limit reached.' ;
        document.getElementById('textarea').value = document.getElementById('textarea').value.substring(0, 4000);
      } else if(remaining <= 50) {
        document.getElementById('charcount_text').innerHTML = '4000 character limit, ' + remaining  + ' remaining.';
      } else {
        document.getElementById('charcount_text').innerHTML = '';
      }
    }
  </script>

Answer 1

使用maxlength 属性：

<textarea  id="textarea" maxlength="4000" onkeyup="limitText()"></textarea>

function limitText() {
  var ta= document.getElementById('textarea'),
      count= ta.value.length,
      ml= ta.maxLength,
      remaining= ml - count,
      cc= document.getElementById('charcount_text');

  if(remaining <= 0) {
    cc.innerHTML = ml+' character limit reached.' ;
  } else if(remaining <= 50) {
    cc.innerHTML = ml+' character limit, ' + remaining  + ' remaining.';
  } else {
    cc.innerHTML = '';
  }
}

Fiddle

Answer 2

试试这个

$.fn.lenghtLimit = function(numLimit) {
  var currentEle = $(this);

  function main() {
    var getCurrentVal = currentEle.val();
    if (getCurrentVal.length > numLimit) {
        currentEle.val(getCurrentVal.substring(0, numLimit));
    }
  }
  $(document).on("keyup", currentEle, main);
}

// call method here with number limit
$("#numberInput").lenghtLimit(10);

您可以使用此限制任何输入或文本区域值的长度 https://jsfiddle.net/akalankaimesh/7hkagewh/