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

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中唯一改变的是绑定选择器,$('.Textarea').bind()以使其在小提琴中$(this)工作,因为在小提琴中不起作用.

Answer 2

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