推特上的人物倒计时 [英] 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.

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