jQuery > Word counter：删除单词时获取增加的计数器值答案

【问题标题】：jQuery > Word counter: Get increasing counter value when deleting wordsjQuery > Word counter：删除单词时获取增加的计数器值
【发布时间】：2013-05-01 12:41:43
【问题描述】：

我正在使用 textarea 来获取 cmets 和所有内容。

我使用的文本区域有字数限制或maxlength 字数。现在我会让用户知道你可以输入多少个字符。

虽然到目前为止这是成功的，但我在刷新计数器值时遇到了问题。一旦我删除字符，它就不会显示计数器的刷新值。此外，当我执行 keyup 时，计数器会显示我开始删除字符的旧值。

现在，如果 textarea 为空并且我输入了一些内容，那么计数器工作正常。

我这里有一个小提琴-

Text area counter

复制步骤-

输入更长的句子。
现在从 textarea 中删除这句话。
从 textarea 中删除所有文本并重新开始输入，它从完整的单词长度开始。

计数器在删除后未显示刷新值。

这是jQuery的一些代码-

$(document).ready(function() {
    var text_max = 300;
    $('#textarea_feedback').html(text_max + ' characters remaining');

    $('#textarea').keypress(function() {
        var text_length = $('#textarea').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

那是因为你在使用keypress，使用keyup事件。

在 Chrome 和 IE 中，keypress 事件只会在按下可以显示的键时触发。退格键和删除键等键没有显示属性，因此不会触发按键事件。

$(document).ready(function() {
    var text_max = 300;
    $('#textarea_feedback').html(text_max + ' characters remaining');

    $('#textarea').keyup(function() {
        var text_length = $('#textarea').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});

演示：Fiddle

【讨论】：

@Manoz 我觉得很好

【解决方案2】：

我以前有过这个！

技巧是使用keyup() 而不是keypress()

Fiddle.

【讨论】：

【解决方案3】：

以下是我将如何捕获所有更改。
另外，我会将 HTML 更改为默认值 300 或任何开始的数字，然后将您正在更改的计数器值包装在另一个元素中，并仅通过此函数更改其值。

   $(document).ready(function() {

    //Don't search for it over and over again
    var $cachedSelector = $('#textarea_feedback');
    var $cachedTextArea = $('#textarea');

    //Common function you can call repeatedly that only updates the counter
    function changeTextArea(){

        var text_length = $cahcedTextArea.val().length;

        var text_remaining = 300 - text_length;

        $cachedSelector.html(text_remaining);
   }

    //Handles Keyup or typing events
    $cachedTextArea.keyup(function() {
        changeTextArea()
    });

    //Handles common chage events like if someone copy/pastes into your input
    $cachedTextArea.change(function() {
        changeTextArea()
    });
});

【讨论】：