我如何用jQuery创建一个文本区域倒计时

How do I create a textarea countdown with jQuery?

本文关键字：一个 文本 区域 倒计时 何用 jQuery 创建      更新时间：2023-09-26

我正在研究这个调查表单，我正在尝试编写一个评论区域，该区域的字符限制为500。从我所看到的来看，我做的每件事都是"正确的"，但显然我肯定忽略了什么。

这是我的jsFiddle。

<span class="char-remain">500 Characters remaining</span>
<textarea class="comment" rows="10" cols="50" maxlength="500">Enter Text Here</textarea>
jQuery

comment = $(".comment");             
comment.on("keyup change", function(){
   charCount = $(this).text().length;
   charRemain = 500 - charCount;
   $(this).prev("span").text("(" + charRemain + ")");
   alert(charRemain + "Characters Remaining");
});

警报真的是为了让我看看它是否在工作或触发，它不是。我错过了什么?

第一行出现错误。

$(document).ready(function {

只更改为:

$(document).ready(function() {

当您试图获得评论字段的长度时，您需要使用.val()函数。它相当于普通JavaScript中的.value。

但是，您可以使用下面的代码来优化代码:

var maxlength = parseInt(comment.attr("maxlength"), 10);

上面的代码将存储注释字段maxlength。所以你可以试试:

$(document).ready(function() {
  var comment = $(".comment");
  var maxlength = parseInt(comment.attr("maxlength"), 10);
  comment.on("keyup keypress change", function() {
    charCount = $(this).val().length;
    charRemain = maxlength - charCount;
    //$(this).prev().prev("span").text(charRemain + " Characters remaining");
    $(".char-remain").text(charRemain + " Characters remaining");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="char-remain">500 Characters remaining</span>
<br />
<textarea class="comment" rows="10" cols="50" maxlength="500">Enter Text Here</textarea>

建议@TiesonT。在注释中，您可以使用以下命令轻松获取span内容:

$(".char-remain").text(charRemain + " Characters remaining");

在这种情况下，您不需要担心注释字段和span内容之间的标记。

更新:

您可以绑定keypress事件以在用户按下键时获得当前长度。

comment.on("keyup keypress change", function() {

你犯了两个错误。

你的文档准备没有正确的语法，其次，从文本区域获得的值不是text()，而是val()。

$(document).ready(function() {
  comment = $(".comment");
  comment.on("keyup change", function() {
    charCount = $(this).val().length;
    charRemain = 500 - charCount;
    $(this).prev("span").text("(" + charRemain + ")");
    alert(charRemain + "Characters Remaining");
  });
});
相关文章：