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/

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/

还有更多错误修复。