5

我有一个表单，当按下一个键或从文本区域粘贴和剪切文本时，会出现剩余的字符数量，但在第一次按键时该功能不起作用，但在第二次按键时，它确实如此。我的代码如下。

$('.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>
4

5 回答 5

5

改为使用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);    
});

演示- 使用 keyup 代替

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

于 2013-03-12T23:57:30.313 回答
4

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

于 2013-03-12T23:58:48.727 回答
0 
$(this).on("keypress", function() {
    var CharsLeft = $(this).parent('div').find('.CharsLeft');
    var Chars = $(this).val().length;

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

尝试.on

于 2013-03-12T23:55:05.167 回答
0

试试这个。

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

    $(CharsLeft).text(5000 - Chars);    
});
于 2013-03-12T23:55:28.047 回答
0

为什么要将 CharsLeft 包装在另一个 $() 中？

它应该是：

CharsLeft.text(5000 - Chars);

另外，我相信您应该使用 .on() 而不是 .bind() （已弃用）

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

那里还包含更多错误修复。

于 2013-03-12T23:57:00.260 回答