Jquery 文本区域字符计数,包括预填充文本
我有一个启动模式,启动时包含一个文本区域,在该文本区域内,根据启动模式的链接动态添加内容 (想想推特——回复推特会自动填充用户的@) 我目前正在使用以下方法计算我的字符数Jquery 文本区域字符计数,包括预填充文本,jquery,twitter-bootstrap,Jquery,Twitter Bootstrap,我有一个启动模式,启动时包含一个文本区域,在该文本区域内,根据启动模式的链接动态添加内容 (想想推特——回复推特会自动填充用户的@) 我目前正在使用以下方法计算我的字符数 $('#post_reply').keyup(function () { var max = 140; var len = $(this).val().length; if (len > max) { var ch = len - max; $('.characterLef
$('#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">×</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>
加载textarea后,您应该能够简单地触发
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();
难道你不喜欢解决方案比你预期的简单得多吗!哈哈,我确实是这样想的,有时候我需要提醒自己,这并不总是非常复杂的事情,这里和那里的一点点触碰真的会产生很大的影响!再次感谢你的帮助。
$('#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();
});
$('#post_reply').val(recipient + ' ').keyup();