Bindowanie nie działa na pierwszym KeyPress przy użyciu jQuery

Question

Mam formularz, w którym po naciśnięciu klawisza lub wklejeniu i przycięciu tekstu z obszaru tekstowego zostanie wyświetlona liczba pozostałych znaków, ale po pierwszym naciśnięciu funkcja nie działa, ale na klawiaturze drugi i tak w nim jest. Mój kod znajduje się poniżej.

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

Dziwne zachowanie.
Oprawa keyup keydown zamiast keypress naprawia to. http://jsfiddle.net/np9w5/1/

Answer 2

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

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

spróbuj .on

Answer 3

Spróbuj tego.

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

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

Answer 4

Dlaczego zawijacie CharsLeft w innym $()?

Powinno być:

CharsLeft.text(5000 - Chars); 

Również uważam, zamiast .bind() (które jest przestarzałe) należy używać .on()

Oto jsFiddle z rozwiązaniem: http://jsfiddle.net/FzWaD/

Zawiera również więcej poprawek.

Answer 5

Zamiast tego użyj wartości , ponieważ odczytanie długości wartości na keypress nie daje dokładnej długości tekstu.

Po naciśnięciu klawisza zostanie wywołane zdarzenie keypress, ale Twój textarea nie został zaktualizowany o nowy tekst, dopóki klucz nie zostanie zwolniony. Użyj keyup, podobnie jak poniżej:

$(this).bind('paste copy cut keyup', function() { 
    var CharsLeft = $(this).parent('div').find('.CharsLeft'); 
    var Chars = $(this).val().length; 

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

---

DEMO - Korzystanie keyup zamiast

---

Jedyne co mi się zmieniło w demie jest selektor wiążącą $('.Textarea').bind() aby zmusić go do pracy w skrzypce jako $(this) nie działałyby na skrzypcach.