如何使用jQuery创建textarea倒计时？

Question

我正在研究这个调查表,我正在尝试编写一个字符限制为500的评论区域.从我所看到的,我做的一切都是"正确的",但显然我必须忽略一些东西.

这是我的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()函数.它与.value普通的JavaScript 相当.

但是,您可以使用下一个优化代码:

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() {