如何用jQuery创建一个“类似推特”的剩余字符数？

Question

我希望增强我的WordPress主题的“元描述”和“标题”标签输入字段，我想添加一个文本片段，在每次按键后评估文本输入字段，并更新字段“目标字符数”，就像推特做的那样。

例如，在"Meta Description“字段中，目标字符数是160。因此，如果该字段为空，则数字将为160。随着用户键入，输入字段中添加的每个字符的计数都会减少，直到达到零为止。

如果计数高于目标，数字将以红色书写，前面有一个减号(同样，就像twitter一样)。

有没有现有的jQuery脚本来做这件事？

<label class="screen-reader-text" for="excerpt">
    Post Excerpt (Meta Description) <span class="counter">150</span> characters*         
</label>

<textarea rows="1" cols="40" name="excerpt" tabindex="6" id="excerpt"></textarea>

Answer 1

据我所知没有，但这里有一些东西可以让你入门：http://jsfiddle.net/yzLbh/

编辑: Andy E是对的-我应该(现在已经)使用input事件添加了支持，如果你在支持它的浏览器上按住一个键，粘贴，拖动等，它就会起作用。http://jsfiddle.net/yzLbh/5/

Answer 2

这并不是太复杂：

JS

maxCharacters = 160;

$('#count').text(maxCharacters);

$('textarea').bind('keyup keydown', function() {
    var count = $('#count');
    var characters = $(this).val().length;

    if (characters > maxCharacters) {
        count.addClass('over');
    } else {
        count.removeClass('over');
    }

    count.text(maxCharacters - characters);
});

HTML：

<textarea></textarea>

<p>
    <strong>You have <em id="count"></em> characters remaining</strong>
</p>

CSS:

.over {
    color: red;
}

演示：

基本上，您可以处理文本区域上的每个事件，并检查长度是否大于或小于阈值。

Answer 3

在输入发生变化时绑定一个函数，检查文本的长度，执行减法，并用它更新div。

HTML

<input type='text' id='from_box' />
<div id='to_box'><span id='remaining'>160</span> characters remaining</div>

jQuery

$("#from_box").bind("keyup", function(){
    var max_characters = 160;
    var total_used = $("#from_box").val();
    var remaining = max_characters - total_used;
    $("#remaining").text(remaining);
});