5

キーを押すか、テキストを貼り付けてテキストエリアから切り取ると、残りの文字数が表示されるフォームがありますが、最初のキーを押すと機能しませんが、2番目のキーを押すと機能します。私のコードは以下です。

$('.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);    
});

デモ- 代わりにキーアップを使用

DEMO で変更した唯一のことは、フィドルでは動作しない$('.Textarea').bind()ようにフィドルで動作させるためのバインディング セレクター$(this)です。

于 2013-03-12T23:57:30.313 に答える
4

奇妙な振る舞い。それを修正する代わりに
バインドします。http://jsfiddle.net/np9w5/1/keyup keydownkeypress

于 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);

また、.bind() (非推奨) の代わりに .on() を使用する必要があると思います

これが解決策を備えたjsFiddleです：http://jsfiddle.net/FzWaD/

そこにはさらにいくつかのバグ修正も含まれています。

于 2013-03-12T23:57:00.260 に答える