Javascript 向html表单添加单词计数器

这个html表单和相关的php代码配合得很好。我需要加一个单词计数器。任何建议

<form action="form.php" method="POST">

<fieldset>

   <input type="hidden" name='counter' value='2'/>

  <p><label for="heading1"></label>
  <input type="text" name="heading1" size="60" /></p>
  <p><label for="input1"></label>   
   <textarea cols="width" rows="height" name="input1">...</textarea></p>


   <p><label for="heading2"></label>
   <input type="text" name="heading2" size="60" value="first para title..."></p>
   <p><label for="input2"></label>
   <textarea cols="width" rows="height" name="input2">...</textarea></p>

<br />
<fieldset>
<input type="submit" value="" />
<input type="reset" value="" />
</fieldset>
</form>

下面是相关的php代码

<?php

$count=$_REQUEST['counter'];

for($i=1;$i<=$count;$i++)
{
echo "<p>" . $_REQUEST['heading'.$i] . "</p>";
echo "<p>" . $_REQUEST['input'.$i]. "</p>";
}

?>  

---

使用javascript，并在文本区域中显示更改事件。 然后在键入和更新计数器时计算字数。

示例：

<textarea name="input1" onkeyup="window.alert(document.getElementsByName('input1')[0].value.trim().split(' ').length);"></textarea>

像这样：

var output = document.getElementById("counter"),
textarea = document.getElementById("textarea");

 textarea.onkeyup = function (event) {
     var words = textarea.value.split(" ");
     output.value = words.length;
 };

为了简化操作，请向HTML元素添加ID，如下所示：

 <input type="hidden" name="counter" id="counter" value="0"/>
 <textarea cols="width" rows="height" name="input2" id="textarea">...</textarea>

...

这样做的作用：每次用户在文本区域中输入一个字母时，它都会获取内容，按空格分割，并计算插入隐藏的

计数器
字段的单词数。提交表单时，字数也将发送到服务器

但是，如果您不需要客户端中的字数（例如，向用户显示她键入的字数），那么我建议您使用PHP进行此操作。查看
stru-split
函数。
提供自己的想法，然后我们可以帮助您！你想在什么时候使用AJAX，只使用JS，你想在打字时或表单提交后数词吗？…是：学习基本JavaScript；）作为旁注，如果使用
name=“heading[]”
而不是
heading1
，
heading2
，则使用表单要容易得多。不要依赖隐藏输入来计算单词数。让PHP来做。@rybo111使用JS提供即时用户反馈没有坏处，前提是它也有服务器端验证的备份。