Число символов Textarea, включая предварительно заполненный текст

Question

У меня есть Bootstrap Modal, который при запуске содержит текстовое поле, в пределах которого содержимое текстовой области динамически добавляется в зависимости от ссылки, которая запускает Modal.

(Think твиттер - отвечая на твит авто заполнит @ пользователя ...)

настоящее время я с помощью следующих сосчитать моих персонажей;

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

Ниже заполнит мой Modal с данным выше 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();