Question

我有一个表单，当按下一个键或从文本区域粘贴文本时，剩余的字符数量会出现，但在第一个按键上，该功能不起作用，但在第二个键盘上，所以它就是这样。我的代码如下。

$('.Textarea').keypress(function (event) {
    if ($(this).is(':visible')) {
        $(this).bind('paste copy cut keypress', function () {
            var CharsLeft = $(this).parent('div').find('.CharsLeft');
            var Chars = $(this).val().length;
            $('.CharsLeft').text(5000 - Chars);
        });

        if (event.keyCode == 13) {
            var Value = $(this).val();

            $(this).parent('div').find('.SubMessages').append('<div style="border-top:1px solid #EEE; padding:10px 0;">' + 'You: ' + Value + '</div>');
            $(this).val('');

            event.preventDefault();
        }
    }
});

<div class="Message" style="width:100%; text-align:left;">
    <div class="MsgInfo" style="display:block; border-bottom:1px solid #EEE;">
        <span class="InnerMsg">From: Tera</span>
        <span class="InnerMsg">Subject: Welcome To Tera!</span>

        <span class="InnerMsg">When: 2 Hours Ago</span>
        <div style="clear:both;"></div>
    </div>
    <div class="UserMsgContent" style="display:block; padding:10px; line-height:1.5em;">
        <div class="SubMessages">
            <div style="padding:10px 0;">Hello</div>
        </div>
        <textarea style="width:930px;" class="Textarea" placeholder="Reply!" maxlength="5000"></textarea>
        <div style="margin-top:10px;">
            <div class="CharsLeft">5000</div>Characters Left
        </div>
    </div>
</div>

Answer 1

使用keyup代替读取keypress上的值的长度并不能提供准确的文本长度。

当您按下该键时，keypress事件将触发，但您的textarea尚未使用新文本进行更新，直到释放该键为止。使用keyup，类似于以下内容：

$(this).bind('paste copy cut keyup', function() {
    var CharsLeft = $(this).parent('div').find('.CharsLeft');
    var Chars = $(this).val().length;

    $(CharsLeft).text(5000 - Chars);    
});

DEMO - 使用密钥更改

我在DEMO中唯一改变的是绑定选择器到$('.Textarea').bind()以使其在小提琴中起作用，因为$(this)在小提琴中不起作用。

Answer 2

奇怪的行为。
绑定keyup keydown而不是keypress修复了它。 http://jsfiddle.net/np9w5/1/

Answer 3

$(this).on("keypress", function() {
    var CharsLeft = $(this).parent('div').find('.CharsLeft');
    var Chars = $(this).val().length;

    $(CharsLeft).text(5000 - Chars);    
});

尝试使用.on

Answer 4

试试这个。

$(this).keypress(function() {
    var CharsLeft = $(this).parent('div').find('.CharsLeft');
    var Chars = $(this).val().length;

    $(CharsLeft).text(5000 - Chars);    
});

Answer 5

为什么要将CharsLeft包装在另一个$（）中？

应该是：

CharsLeft.text(5000 - Chars);

此外，我相信你应该使用.on（）

而不是.bind（）（已弃用）

以下是解决方案的jsFiddle：http://jsfiddle.net/FzWaD/

还有更多错误修复。

Bind在使用jQuery的第一个KeyPress上不起作用

5 个答案: