文本区:显示错误数量的字符，我可以写

Textarea: Showing wrong qty of characthers that I can write

本文关键字：字符 我可以 显示 错误 文本区      更新时间：2023-09-26

我在为文本区域设置限制字符时遇到了一个小问题。

我一直在努力展示我可以写的字符的限制，以及我可以继续写的字符键。

限制为10个字符，但当我按下第一个键时，输出会持续显示10个"空格"以继续写入。当我写最后一个字符时（理论上），输出显示可以再按一个，但这就像一个不可见的字符。

也许我已经忘记了如何做数学，但我很感激在这方面的任何帮助（如果代码还有其他问题，请告诉我）。

这是HTML部分：

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <textarea id='text'></textarea>
  <br />
  <span>Characters <span id='info'></span></span>
</body>
</html>

这就是JavaScript:

function showTill(limit){
var getId = document.getElementById('text');
  var shot = getId.onkeydown = exe;
  function exe(stuff){
  var getSpan= document.getElementById('info');
  var printSpan = getSpan.innerHTML = limit - getId.value.length; //prints qty of character keys I can write yet.
  var evento = stuff || window.event;
  var combine = evento.which || evento.keyCode; 
  var omitDel = combine === 8 || combine === 46; //Enabling Backspace and Delete after reaching the limit of character written.
  var omitArrow = combine === 37 || combine === 39; //Enabling Right/Left Arrows after reaching the limit of character written.    
  if (getId.value.length >= limit && !omitDel && !omitArrow){ 
    return false;
  }else{
    return true;
  }
  }
}

showTill(10);

谢谢！！

如果我了解发生了什么，解释是在事件处理中。

您正在捕获onkeydown事件。所以，第一次按下某个键时，事件被触发，getId.value.length显示0，这是正确的。那时没有性格。稍后，当事件处理程序已经完成其工作时，将显示字符。所以在第一次按下char之后显示Character 10。现在，再按一个，getId.value返回1:length 1，因为当时只有一个字符，第二个字符正在混合，但还没有。。。

按10个字符，但Character字段显示1。

onkeypress 也会有类似的行为

我们必须计算第一个"遗漏"字符。我会将事件处理功能更改为

function exe(stuff) {
    var printSpan;
    var getSpan = document.getElementById('info');
    //var printSpan = getSpan.innerHTML = limit - (getId.value.length + 1); //prints qty of character keys I can write yet.
    var evento = stuff || window.event;
    var combine = evento.which || evento.keyCode; 
    var isDel = combine === 8 || combine === 46; //Enabling Backspace and Delete after reaching the limit of character written.
    var isArrow = combine === 37 || combine === 39; //Enabling Right/Left Arrows after reaching the limit of character written.    
    if ((getId.value.length + 1) > limit && !isDel && !isArrow) {
        return false;
    } else {
        if (isArrow) {
            // do nothing
            return true;
        }
        if (isDel)
            printSpan = getSpan.innerHTML = limit - (getId.value.length - 1);
        else
            printSpan = getSpan.innerHTML = limit - (getId.value.length + 1);
        return true;
    }
}
相关文章：