如何使用jQuery创建一个"类似"的剩余字符？

Question

我正在寻找增强我的WordPress主题的"元描述"和"标题"标签输入字段,我想添加一个文本片段,在每次按键后评估文本输入字段并更新字段"目标字符数"就像Twitter的确如此.

例如,在"元描述"字段中,目标字符数为160.因此,如果字段为空,则数字为160.当用户键入时,计数会随着每个字符添加到输入字段而减少,直到它达到零.

如果计数高于目标,则数字将以红色写入,前面带有减号(再次,就像推特一样).

是否有现成的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;
}

演示:http://jsfiddle.net/HgfPU/10/

您基本上处理textarea上的每个事件,并检查长度是否大于/小于阈值.