如何使用 jQuery 创建文本区域倒计时？

Question

我正在处理这份调查表，我正在尝试编写一个字符数限制为 500 的评论区。据我所见，我正在做所有事情 "right"，但显然我必须忽略一些东西。

这是我的jsFiddle。

HTML

<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");

});

警报真的在那里让我看看它是否在工作或触发，但事实并非如此。我错过了什么？

Answer 1

第一行有错误。

$(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 的建议。在评论中，您可以使用以下方式轻松获取跨度内容：

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

在这种情况下，您无需担心评论字段和跨度内容之间的标签。

更新：

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

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

Answer 2

你在这里犯了两个错误。

其次，您准备好的文档没有正确的语法，从文本区域获取值不是 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");

  });
});

如何使用 jQuery 创建文本区域倒计时？

How do I create a textarea countdown with jQuery?

javascript

jquery

html

countdown