javascript - 瞬时字数计数器

Question

我想在一个大文本框（想想博客编辑器）中添加一个单词计数器，它会随着我输入的每个单词而增加。（即，在我输入“Hello”之后，它会从 0 增加到 1，在我输入“world”之后，它会增加到 2）。我想在网页中执行此操作，但我很乐意考虑其他选项。

我不知道该怎么做。我认为有一种方法可以使用 Javascript 来做到这一点，但我对 Javascript 几乎一无所知。

有人可以指出我弄清楚如何做到这一点的方向吗？

Answer 1

我认为实现这一点的一个好主意是检查输入的字母（例如，onKeyUp事件）。如果前一个字符不是空格且当前不是字母，则递增计数。细节：如果前一个字符是非字母，则不应增加（双空格 e tc）

当用户按下Backspace或Delete键时，应该进行类似的检查。您可以在此处找到关键代码

这种“即时”计数的困难在于检查“非键”输入。例如，用户可以使用Ctrl+Insert组合从剪贴板复制数据，或者在文本框中选择文本然后Del按键。如果确实需要避免整个价值处理（这可能非常巨大），则应单独处理

Answer 2

在文本框的 onkeyup 事件上使用此功能。

document.getElementById("inputbox").addEventListener("keyup",function(e){
   // Get the inputs text.
   var inputVal = e.srcElement.value;
   var counter = 0;
   // Check input isn't empty.
   if(inputVal){
       // Count individual letters.
       var wordlist = inputVal.split(" ");
       for(var i=0;i<wordlist.length;i++)
           if(wordlist[i])
               counter = counter+1;
   }
   // Then set your counter element.
   document.getElementById("counter").value = counter;
});