使用jQuery时，第一次按键无法绑定键盘事件。

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>

- Moussa Harajli

---

你能展示一下你的HTML吗？“this”是什么？ - Explosion Pills

这是一个文本区域，一秒钟。 - Moussa Harajli

Answer 1

使用keyup替代keypress，因为在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);    
});

---

演示 - 使用keyup替代

---

我在演示中唯一更改的是绑定选择器为$('.Textarea').bind()，以使其在fiddle中工作，因为$(this)在fiddle中无法工作。

- Nope

Answer 2

行为奇怪。
绑定 keyup keydown 而不是 keypress 可以解决这个问题。 http://jsfiddle.net/np9w5/1/

- Pierre

Answer 3

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

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

尝试使用.on。

- PSR

Answer 4

试试这个。

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

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

- tymeJV

Answer 5

为什么要在 CharsLeft 外面再加一个 $()？

应该是这样的：

CharsLeft.text(5000 - Chars);  

另外，我认为你应该使用.on()而不是已经被弃用的.bind()。

这里是带有解决方案的jsFiddle链接：http://jsfiddle.net/FzWaD/。

还包括了几个其他错误修复。

- Kevin Wang