[英]JQuery keydown event is only triggered once unless anything else happens
[英]Why does the title of my Bootstrap tooltip only change once with the keydown event in jQuery?
我有文本输入和文本区域,我想向用户显示他们使用的字符数超出了限制。 因此,我为每个具有 data-maxlength 属性的元素添加了一个工具提示。 每次按下键时,我都会为当前文本输入创建工具提示,其中包括长度和最大长度值(x / 250 个字符)。 问题是工具提示的 title 属性值在您第一次停止输入后永远不会改变。 这是一个jsFiddle向您展示。
jQuery
$(document).ready(function(){
$('[data-maxlength]').each(function(){
$(this).on('keyup', function(){
$(this).tooltip({
selector: 'data-toggle="tooltip"',
placement: 'bottom',
trigger: 'manual',
title: $(this).val().length + ' / ' + $(this).data('maxlength') + ' characters used.'
});
$(this).tooltip('show');
});
});
});
HTML:
<textarea name="description" data-maxlength="250"></textarea>
谢谢你的时间。
标题仅在第一个键事件上设置,试试这个:
title: function() {return $('[data-maxlength]').val().length + ' / ' + $(this).data('maxlength') + ' characters used.';}
请参阅: JavaScript 闭包如何工作?
我同意 Dreamveivers 的评论,所以这将是一个更好的实现:
$(document).ready(function(){ $('[data-maxlength]').each(function(){ var maxText = ' / ' + $(this).data('maxlength') + ' characters used.'; var tooltip = $(this).tooltip({ selector: 'data-toggle="tooltip"', placement: 'bottom', trigger: 'manual' }); $(this).on('keyup', function(){ tooltip.attr('title', $(this).val().length + maxText) .tooltip('fixTitle') .tooltip('show'); }); }); });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <textarea name="description" data-maxlength="250"></textarea>
这似乎可以解决您的问题:
$(document).ready(function(){
$('[data-maxlength]').each(function(){
$(this).on('keyup', function(){
$(this).attr('data-original-title', $(this).val().length + ' / ' + $(this).data('maxlength') + ' characters used.');
$(this)
.tooltip({
selector: 'data-toggle="tooltip"',
placement: 'bottom'
})
.data('placement', 'bottom');
$(this).tooltip('show');
});
});
});
实际上,这是一个有效的问题,它已经在github issue
日志中,到目前为止,过去 2 年多以来还没有任何重大更新。
解决方法:
.each()
之外的所有文本区域初始化tooltip
,因为不需要通过类选择器txtarea
遍历所有元素[在性能方面,类选择器的使用远远优于属性选择器]。keyup
回调中tooltip
title
信息的attr
$(this).attr('data-original-title', $(this).val().length + ' / ' + $(this).data('maxlength') + ' characters used.');
我注意到每次我对元素(例如 textarea)使用.tooltip()
时,当显示工具提示时,总会附加一个<div>
作为元素的下一个兄弟元素(例如 textarea)。 附加的<div>
具有类tooltip
。 在<div>
有一个类tooltip-inner
的元素,其中包含作为工具提示中显示消息的文本。 这是附加的<div>
的示例:
<div style="top: 63px; left: 9.5px; display: block;" id="tooltip59349" class="tooltip fade bottom in" role="tooltip">
<div style="left: 50%;" class="tooltip-arrow"></div>
<div class="tooltip-inner">
<span class="n-char">0</span> / 250 characters used.
</div>
</div>
所以,我的解决方案是替换.tooltip-inner
的文本。 在此解决方案中,您不必每次要更改标题时都调用 .tooltip('show')。 您不会在每个键上看到闪烁的工具提示。
$(document).ready(function(){
$('[data-maxlength]').each(function(){
$(this).tooltip({
placement: 'bottom',
trigger: 'focus',
html: true,
title: '<span class="n-char">' + $(this).val().length + '</span> / ' + $(this).data('maxlength') + ' characters used.'
});
$(this).on('focus keyup', function(){
$(this).next('.tooltip').find('.tooltip-inner .n-char').text($(this).val().length);
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.