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上的每个事件，并检查长度是否大于/小于阈值。

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);
});

Answer 4

看看这个插件列表：

http://plugins.jquery.com/plugin-tags/character-counter

Answer 5

检查： http://jsfiddle.net/2FLjt/

$('#checkval').keyup( function() {

    var value = $(this).val();
    // get MAX chars from textarea
    var maxlength = $(this).data("maxlength");

    var compare = maxlength - value.length;
    // decide if chars is under/over
    if (compare >= 0) {
        $("#inputcounter").removeClass('error').html(compare + "characters left");
    } else if (compare < 0) {
        $("#inputcounter").addClass('error').html(compare + "characters left");
    }

});

Answer 6

您可以这样做（请参阅this jsfiddle获取证明）：

HTML：

<input type="text" class="twitter-like" value="" />
<div>Remaining characters: <span class="twitter-counter" data-default-value="160"></span></div>

JavaScript的：

var counter = jQuery('span.twitter-counter[data-default-value]');
counter.html(counter.data('default-value'));
jQuery('input.twitter-like').bind('keyup',function(){
    counter.html(counter.data('default-value') - jQuery(this).val().length);
});

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

6 个答案: