![](/img/trans.png)
[英]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.