3

我有一个输入字段，当聚焦时显示引导工具提示。

<input id="nombrecurso" name="nombrecurso"
                        data-original-title="Required field!"
                        data-toggle="tooltip" data-trigger="hover"
                        data-delay='{"show":"200", "hide":"0"}'
                        class="form-control input-lg">
<h6 class="count_message pull-right"></h6>

该字段的剩余字符数显示在附近<h6>。此计数器在jquery keyup事件上更新。

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
$(document).on("keyup", '#nombrecurso' ,function() {
  $(this).next('.count_message').empty().append($(document.activeElement).attr('maxlength') + ' characters remaining');
  //event code, is doesn't have to be keyup, it happens with 
  //other events such as click

}

问题是当工具提示处于活动状态时，jquery 事件 keyup 不会触发并且计数器不会更新。

您可以在这里看到问题：codepen。

尝试在输入中写一些东西，无论是否将鼠标悬停在输入字段上。

...任何想法如何解决这一问题？

4

1 回答 1

1

在tooltip输入之后动态插入一个元素，因此next()与您的输出元素不匹配。改为使用nextAll()：

例如

$(this).nextAll('.count_message')

代码笔： http ://codepen.io/HiTechMagic/pen/NGJJwY

笔记：

  • 在 keyup 处理程序中，您可以使用$(this)而不是$(document.activeElement).
  • 而不是empty().append()用于html()设置文本内容（使用empty()&append()与 DOM 元素以避免重新解析 HTML）。

例如

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

$(document).on("keyup", '#nombrecurso', function() {
  var text_length = $(this).val().length;
  var whatareyoucounting = $(this).attr('maxlength');
  var text_remaining = whatareyoucounting - text_length;
  $(this).nextAll('.count_message').html(text_remaining + ' characters remaining');
});
于 2015-11-19T17:42:09.523 回答