计算输入字符 - 使用onkeyup还是onkeydown？

Question

我需要为stackilflow.com的工作方式设置用户的最大字符输入。我计划使用javascript向用户提供反馈并计算字符数。仅允许不超过最大字符数的提交。我不打算使用xhtml输入属性来限制此数量，因为只要不提交字符，我就会允许对字符进行过度使用。在后端我只需将mysql中的varchar字段设置为charmax。

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

Answer 1

使用document.getElementById('YourInputBoxId').value.length获取文字的长度。

请勿使用键盘事件来跟踪字符数。 Ctrl + V是单个按键（或两个可能），但它可能导致您的文本增长兆字节。 :) 您可以使用这些事件来更新具有当前字符数的标签。

除了onkeyup之外，您还可以使用oninput事件，当您在输入框中输入时会触发该事件。

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

一个很好的选择是设置输入的maxlength属性。这样，即使没有javascript，也会强制执行最大长度。然后，您可以删除该标志并从javascript添加必要的事件。通过这种方式，您将拥有一个可用的javascript浏览器解决方案，同时对非JavaScript浏览器进行更严格的检查，我认为这比不检查更好。

Answer 2

HTML：

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

JS：

function textLength(value){
   var maxLength = 144;
   if(value.length > maxLength) return false;
   return true;
}

document.getElementById('text').onkeyup = function(){
     if(!textLength(this.value)) alert('text is too long!');
}

这是一个小提琴演示：http://jsfiddle.net/maniator/L2LRK/

Answer 3

我在你的建议中发现了这个错误。这是我的测试模式：

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

1：使用键盘，正常输入文字

对于123456，将删除6

对于ABCDEF，F将被删除

结果：确定

2：使用键盘，从其他地方复制并粘贴123456和ABCDEF

表示123456，粘贴（Ctrl V）：＆＃34; 123456123456＆＃34; =＆GT; 456123456将被删除

对于ABCDEF，粘贴（Ctrl V）：＆＃34; ABCDEFABCDEF＆＃34; =＆GT; DEFABCDEF将被删除

结果：确定

3：使用鼠标，复制并粘贴来自其他地方的123456和ABCDEF

表示123456，粘贴（右击+粘贴）：＆＃34; 123456123456＆＃34; =＆GT;不会删除任何字符

对于ABCDEF，粘贴（右击+粘贴）：＆＃34; ABCDEFABCDEF＆＃34; =＆GT;不会删除任何字符

结果：FALSE;

4：在输入其他地方后，使用鼠标，复制并粘贴来自其他地方的123456和ABCDEF

表示123456，粘贴（右击+粘贴）：＆＃34; 123456123456＆＃34; =＆GT;不会删除任何字符，输入＆＃34; 123＆＃34;使用keyboard =＆gt;所有文字都将被删除。

对于ABCDEF，粘贴（右击+粘贴）：＆＃34; ABCDEFABCDEF＆＃34; =＆GT;不会删除任何字符，输入＆＃34; ABC＆＃34;使用keyboard =＆gt;所有文字都将被删除。

结果：FALSE;

我在相同功能的项目中向你提供了我的错误。在我的函数中，这种模式对于ALL都是错误的。在这里：jsfiddle我在互联网上找到了这个功能，对不起，我忘记了来源，所以如果你是主人，请在这里公开。

HTML：

＆＃13;

＆＃13;

//Count content
  maxL = 2000;
  var bName = navigator.appName;

  function taLimit(taObj) {
    if (taObj.value.length == maxL) return false;
    return true;
  }

  function taCount(taObj, Cnt) {
    objCnt = createObject(Cnt);
    objVal = taObj.value;
    if (objVal.length > maxL) objVal = objVal.substring(0, maxL);
    if (objCnt) {
      if (bName == "Netscape") {
        objCnt.textContent = maxL - objVal.length;
      } else {
        objCnt.innerText = maxL - objVal.length;
      }
    }
    return true;
  }

  function createObject(objId) {
    if (document.getElementById) return document.getElementById(objId);
    else if (document.layers) return eval("document." + objId);
    else if (document.all) return eval("document.all." + objId);
    else return eval("document." + objId);
  } //End Count content

＆＃13;

You have <b><label id="myCounter">2000</label></b> characters left
<br/>
<textarea class="inputtextfield" onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,'myCounter')" id="content" name="content" rows=7 wrap="physical" cols=40></textarea>

＆＃13;

＆＃13;

＆＃13;

我很困惑如何解决我的错误。

Answer 4

有两个功能，因为有两个不同的事件。如果您想知道某人何时按下Ctrl + Enter，您需要确切知道每个按键何时按下以及何时按下它。

在你的情况下（当达到极限时显示警告）我会使用keydown，因为这是首先发生的事情，就像你在用户查看X字符时所知道的那样。如果您使用keyup te用户可以按几秒钟而不会看到任何消息。

要计算你可以做的字符：

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