jquery - 文本区域字符计数(包括预填充文本)

Question

我有一个 Bootstrap Modal，在启动时包含一个文本区域，在该文本区域内，内容会根据启动 Modal 的链接动态添加。

(想想 Twitter - 回复推文会自动填充用户的 @...)

我目前正在使用以下方法来计算我的字符数；

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