javascript - 如何防止文本框在达到javascript限制时接受输入

Question

我正在从文本框获取输入并计算java脚本中的字符数(不包括空格、特殊字符和换行符(输入))，但我无法限制用户输入任何类型的字符，直到他编辑文本输入我能够阻止完整键盘的位置。 我正在使用下面的代码，您能否建议我添加一些内容，以便我可以添加上述功能。

function countChars( countfrom, displayto ) {
    var val = document.getElementById( countfrom ).value, len;
    val = val.replace( /[^a-zA-Z0-9]/igm, "" );
    len = val.length;

    document.getElementById( displayto ).innerHTML = len;
    if ( len >= 9 ) {
        onkeydown = function( e ) {
            e.preventDefault();
        }
    }
}

<textarea id="data" cols="40" rows="5"
onkeyup="countChars('data','charcount');" onkeydown="countChars('data','charcount');" onmouseout="countChars('data','charcount');"></textarea><br>
<span id="charcount">0</span> Characters entered.

Answer 1

preventDefault() 没问题，但您应该允许退格 和删除 以便用户编辑文本。

检查下面的代码片段:

function countChars(countfrom, displayto) {
  var val = document.getElementById(countfrom).value;
  val = val.replace(/[^a-zA-Z0-9]/igm, "");
  var len = val.length;

  document.getElementById(displayto).innerHTML = len;

  onkeydown = function(e) {
    if (e.keyCode != 8 && e.keyCode != 46 && len >= 9)
      e.preventDefault();
  }

}

<textarea id="data" cols="40" rows="5" onkeyup="countChars('data','charcount');" onkeydown="countChars('data','charcount');" onmouseout="countChars('data','charcount');"></textarea>
<br>
<span id="charcount">0</span> Characters entered.