像Twitter上的字符倒计时 [英] Character countdown like on twitter

问题描述

如何像使用jQuery在Twitter上那样进行剩余字符"倒计时? 并且还将输入限制为文本区域.

How can I make a "remaining characters" countdown like the one on Twitter with jQuery? And also limit the input to a textarea.

推荐答案

制作一个span和textarea并为它们提供唯一的选择器(使用ID或类)，如下所示:

Make a span and textarea and give them unique selectors (using an ID or class) like so:

<textarea class="message" rows="2" cols="30"></textarea>
<span class="countdown"></span>

然后执行如下更新功能:

And then make an update function like so:

function updateCountdown() {
    // 140 is the max message length
    var remaining = 140 - jQuery('.message').val().length;
    jQuery('.countdown').text(remaining + ' characters remaining.');
}

并在加载页面和更改消息时使该函数运行:

And make that function run when the page is loaded and whenever the message is changed:

jQuery(document).ready(function($) {
    updateCountdown();
    $('.message').change(updateCountdown);
    $('.message').keyup(updateCountdown);
});

访问示例，然后查看源文件. jQuery使这种事情变得非常简单.

Visit an example and view the source. jQuery makes things like this very simple.

这篇关于像Twitter上的字符倒计时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！