Javascript 计数输入字符-使用onkeyup或onkeydown？

我需要将用户的最大字符输入设置为类似stackoverflow.com的工作方式。我计划使用javascript向用户提供反馈并计算字符数。仅允许提交不超过最大字符数的内容。我不打算使用xhtml输入属性来限制这个数量，因为只要不提交字符，我就允许字符过多。在后端，我将把mysql中的varchar字段设置为charmax

---

问题是，如何计算字符输入，是基于onkeydown（）还是onkeydup（）。我不太清楚为什么有两个函数，因为向下的键必须出现，所以我应该使用哪一个来进行计数？

使用

document.getElementById（'YourInputBoxId'）.value.length

来获取文本的长度

不要使用键盘事件来跟踪字符数。Ctrl+V是单次按键（可能是两次），但它会导致文本增加MB。：） 您可以使用这些事件以当前字符数更新标签

除了

onkeyup

，您还可以使用

oninput

事件，当您在输入框中键入时会触发该事件

请记住，还要始终检查服务器。Javascript可能会失败或被故意禁用。您的服务器应始终执行必要的检查。虽然我相信MySQL会自动截断过大的文本

一个好的替代方法是设置输入的maxlength属性。这样，即使没有javascript，也可以强制执行最大长度。然后，您可以删除该标志并从javascript中添加必要的事件。这样，您就可以为javascript浏览器提供一个可用的解决方案，同时对非javascript浏览器进行更严格的检查，我认为这比根本不检查要好。

HTML:

<input type='text' id='text'/>

---

这里有一个小提琴演示：

有两个函数，因为有两个不同的事件。例如，如果您想知道某人何时按下了

Ctrl+Enter

，您需要确切地知道每个键何时按下以及何时释放

在您的情况下（达到限制时显示警告），我会使用

keydown

，因为这是首先发生的，这样您就可以在用户超过X个字符时知道。如果使用了

keyup

te，用户可以按键几秒钟而看不到任何消息

要计算字符数，可以执行以下操作：

document.getElementById("myInput").value.length

---

我在你的建议中发现了漏洞。以下是我的测试模式：

如果限制最大字符数为05个字符。 测试值：123456，ABCDEF

1：使用键盘，正常输入文本 对于123456，将删除6个

对于ABCDEF，F将被删除

结果：好的

2：使用键盘，从其他地方复制粘贴123456和ABCDEF 对于123456，粘贴（Ctrl V）：“123456123456”=>456123456将被删除

对于ABCDEF，粘贴（Ctrl V）：“ABCDEFABCDDEF”=>DEFABCDDEF将被删除

结果：好的

3：使用鼠标，从其他位置复制并粘贴123456和ABCDEF 对于123456，粘贴（右键单击+粘贴）：“123456123456”=>不会删除任何字符

对于ABCDEF，粘贴（右键单击+粘贴）：“ABCDEFABCDDEF”=>不会删除任何字符

结果：假

4：使用鼠标，从其他地方复制并粘贴123456和ABCDEF，然后键入其他内容 对于123456，粘贴（右键单击+粘贴）：“123456123456”=>不会删除任何字符，使用键盘键入“123”=>将删除所有文本

对于ABCDEF，粘贴（右键单击+粘贴）：“ABCDEFABCDDEF”=>不会删除任何字符，使用键盘键入“ABC”=>将删除所有文本

结果：假

我给你我的假从我的项目在同一功能。在我的函数中，这种模式对所有人都是错误的。这里是我的：这个功能，我在互联网上找到的，对不起，我忘记了来源，所以如果你是所有者，请给我在这里公开

HTML:

//计算内容
maxL=2000；
var bName=navigator.appName；
函数taLimit（taObj）{
if（taObj.value.length==maxL）返回false；
返回true；
}
功能taCount（taObj，Cnt）{
objCnt=createObject（Cnt）；
objVal=taObj.value；
如果（objVal.length>maxL）objVal=objVal.substring（0，maxL）；
if（objCnt）{
如果（bName==“Netscape”）{
objCnt.textContent=maxL-objVal.length；
}否则{
objCnt.innerText=maxL-objVal.length；
}
}
返回true；
}
函数createObject（objId）{
if（document.getElementById）返回document.getElementById（objId）；
否则，如果（文件层）返回eval（“文件”+objId）；
否则，如果（document.all）返回eval（“document.all.”+objId）；
否则返回eval（“文件”+objId）；
}//结束计数内容

还剩下2000个字符

实际上，您应该只使用一个插件，比如。但要回答您的问题，您应该绑定keyUp以及其他事件（如粘贴），并且可能应该设置0毫秒的超时，以生成更新文本。似乎是相关的。谢谢，我可以用它来获取价值。所以使用onkeyup（）作为反馈显示，但字符实际上显示在onkeydown（）上，因此如果您想更详细，onkeydown（）会更准确。@Chris

.value.length

不会总是在keyDown事件中更新（或者至少在5个月前我这样做的时候没有在Chrome上更新），这就是为什么keyUp通常是绑定的。无论是谁做了全面的否决票，都应该停止或给出解释。我把两个都投回了0，因为这两个都是非常好的答案。谢谢。我觉得有点混乱，因为我写了“不要使用键盘事件”。我认为Chris的意思是计算对这些事件的调用以获得字符数，而不是获得框中文本的实际长度

document.getElementById("myInput").value.length