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;
 };

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

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

这样做：每次用户向textarea发布一个字母时，它会获取内容，将其拆分为空格并计算插入隐藏counter字段的单词数。提交表单时，单词数也将发送到服务器。

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

Answer 2

示例：

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

Answer 3

使用javascript，在textarea中更改事件。然后在输入时计算单词并更新计数器。

在html表单中添加单词计数器

3 个答案: