1

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

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

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

现在，如果 textarea 为空并且我输入了一些内容，那么 counter 效果很好。

我这里有一个小提琴-

文本区域计数器

重现步骤-

  1. 输入更长的句子。
  2. 现在从 textarea 中删除这句话。
  3. 从 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');
    });
});
4

3 回答 3

2

这是因为您正在使用 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');
    });
});

演示：小提琴

于 2013-05-01T04:19:18.197 回答
1

我以前有过这个！

诀窍是使用keyup()而不是keypress()

小提琴。

于 2013-05-01T04:21:42.000 回答
1

这是我将如何捕获所有更改的方法。
此外，我会将 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()
    });
});
于 2013-05-01T04:34:02.940 回答