javascript - 将单词计数器添加到 html 表单

Question

这个 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>";
}

?>  

Answer 1

像这样:

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

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

为了更容易，将 ID 添加到您的 HTML 元素，如下所示:

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

这是做什么的:每次用户在文本区域中释放输入一个字母时，它都会获取内容，将其拆分为空格并计算插入到隐藏的 counter 字段中的单词数。提交表单时，字数也会发送到服务器。

但是，如果您不需要客户端中的字数(例如向用户显示她输入了多少字)，那么我建议您在 PHP 中执行此操作。查看 str_split 函数。