字符倒计时就像在推特上

Question

如何使用jQuery在Twitter上制作"剩余角色"倒计时？并且还将输入限制为textarea.

Answer 1

创建一个span并textarea给它们唯一的选择器(使用ID或类),如下所示:

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

然后创建一个更新函数:

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

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

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

访问示例并查看源代码.jQuery使这样的事情变得非常简单.

Answer 2

我已经成功使用了Aaron Russell 简单可数的jQuery插件 ; 但是,如果我要编写它,我会设计它有点不同(自动计数器div创建,使用data-maxlength属性而不是插件选项等).

用法简单:

$('#my_textarea').simplyCountable();

高级用法:

$('#my_textarea').simplyCountable({
    counter: '#counter',
    countable: 'characters',
    maxCount: 140,
    strictMax: false,
    countDirection: 'down',
    safeClass: 'safe',
    overClass: 'over',
    thousandSeparator: ','
});

Answer 3

使用jQuery,Mootools或类似的东西进行如此简单的任务是自杀......除非你已经将它们用于其他东西.

简单的javascript功能:

function limitTextCount(limitField_id, limitCount_id, limitNum)
{
    var limitField = document.getElementById(limitField_id);
    var limitCount = document.getElementById(limitCount_id);
    var fieldLEN = limitField.value.length;

    if (fieldLEN > limitNum)
    {
        limitField.value = limitField.value.substring(0, limitNum);
    }
    else
    {
        limitCount.innerHTML = (limitNum - fieldLEN) + ' charachter(s) to go.';
    }
}

第一个参数是输入/ textarea的id.第二个 - 显示字符的div的id.第三是限制本身.

简单的HTML:

<input type="text" value="" name="title" id="title" maxlength="100" onkeyup="limitTextCount('title', 'divcount', 100);" onkeydown="limitTextCount('title', 'divcount', 100);">
<br>
<div id="divcount">100 charachter(s) to go..</div>