Textarea 문자 수 미리 채워진 텍스트 포함

Question

시작시 모달을 시작하는 링크에 따라 해당 텍스트 영역 내에 동적으로 텍스트 영역이 포함 된 부트 스트랩 모달이 있습니다.

- 나는 현재 내 문자를 계산하려면 다음을 사용하고

(트위터 생각해 트윗 자동 회신은 사용자의 @를 ... 웁니다); 그러나 - - 잘 작동

$('#post_reply').keyup(function() { 
var max = 140; 
var len = $(this).val().length; 
    if (len > max) { 
     var ch = len - max; 
      $('.characterLeft').text('Characters Remaining: - ' + ch); 
      $('#reply-characters').attr('class', 'exceeded'); 
      $('.post-reply').attr('disabled', 'disabled'); // Disable submit button as over char limit 
    } else { 
     var ch = max - len; 
      $('.characterLeft').text('Characters Remaining: ' + ch); 
      $('#reply-characters').removeAttr('class'); 
      $('.post-reply').removeAttr('disabled'); // Enable submit button as char count below MAX 
    } 
}); 

, 나는 내가 더 나은 기록 할 수있는 확신으로 구체화 할 계획 내가 입력을 시작 할 때까지 현재는 문자 수를 수정하지 않습니다.

이와 같이 140 문자 남았습니다. 사실 상자에서 동적으로로드 된 텍스트의 길이에서 140을 뺀 값입니다.

모달로드가 가능하고 기존 문자를 이미 계산할 수 있습니까?

필자는 .keyup 라인을 사용하여 함수를 트리거 할 수 있으면 좋겠지 만 jQuery n00b를 사용하면 포인터/안내에 정말 감사하겠습니까?

내 모달입니다.

<div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="replyModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="replyModalLabel">New message</h4> 
      </div> 

    <div class="modal-body"> 
     <form role="form"> 
      <div class="form-group text-right"> 
       <textarea class="form-control" id="post_reply"></textarea> 
       <div id="reply-characters"><span class="characterLeft"></span></div> 
      </div> 
     </form> 
    </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button type="button" class="btn btn-primary post-reply">Post Tweep</button> 
      </div> 
     </div> 
    </div> 
</div> 

또한이를 실행하는 링크입니다.

<a href="#" class="" data-toggle="modal" data-target="#replyModal" data-whatever="@userName" title="Reply"><i class="fa fa-reply"></i></a> 

는 아래 .. 위의 HREF의 데이터로 내 모달을 채 웁니다

$('#replyModal').on('show.bs.modal', function (event) { 
     var button = $(event.relatedTarget) // Button that triggered the modal 
     var recipient = button.data('whatever') // Extract info from data-* attributes 
     var modal = $(this) 
     modal.find('.modal-title').text('Reply to ' + recipient) 
     modal.find('.modal-body textarea').val(recipient + ' ') 
}) 

Answer 1

당신이 당신의 핸들러 내부의 코드를 실행 텍스트 영역을로드 한 후 단순히 keyup 이벤트를 트리거 할 수 있어야한다

$('#replyModal').on('show.bs.modal', function (event) { 
     var button = $(event.relatedTarget) // Button that triggered the modal 
     var recipient = button.data('whatever') // Extract info from data-* attributes 
     var modal = $(this) 
     modal.find('.modal-title').text('Reply to ' + recipient) 
     modal.find('.modal-body textarea').val(recipient + ' '); 
     /* now trigger keyup */ 
     $('#post_reply').keyup(); 
}); 

는 내가 선택 불일치에 대해 조금 혼란 스러워요 그리고 당신은 텍스트 영역에 대한 modal.find()를 사용하지 왜 그냥 ID를 사용합니다. 나는 그들이 동일하다고 생각한다.

$('#post_reply').val(recipient + ' ').keyup();