Question

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

我使用的文字区域有单词限制或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');
    });
});

Answer 1

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

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

$(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

Answer 2

我之前有过这个！

欺骗是使用keyup()代替keypress()

Fiddle

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

jQuery＆gt;字计数器：删除单词时获得增加的计数器值

3 个答案: