为什么我的 Bootstrap 工具提示的标题只会随着 jQuery 中的 keydown 事件而改变一次？

Question

我有文本输入和文本区域，我想向用户显示他们使用了多少字符超出了限制。因此，我为每个具有 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>

感谢您的宝贵时间。

Answer 1

标题只在第一个关键事件上设置，试试这个：

title: function() {return $('[data-maxlength]').val().length + ' / ' + $(this).data('maxlength') + ' characters used.';}

见：How do JavaScript closures work?

我同意 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>

见：Change Twitter Bootstrap Tooltip content on click

Answer 2

这似乎解决了您的问题：

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

https://jsfiddle.net/vw49te7d/

在这里找到：Change Twitter Bootstrap Tooltip content on click

Answer 3

实际上，这是一个有效的问题，它已经在 github issue 日志中，到目前为止，过去 2 年多以来还没有任何重大更新。

Github issue page

解决方法：

1. 为.each()之外的所有文本区域初始化tooltip，因为不需要通过类选择器txtarea循环遍历所有元素[在性能方面类选择器的使用远优于属性选择器] .
2. 更新attr，其中包含tooltip 内部tooltip 回调的title 信息

$(this).attr('data-original-title', $(this).val().length + ' / ' + $(this).data('maxlength') + ' characters used.');

Live Demo @ JSFiddle

Answer 4

我注意到每次我将.tooltip() 用于元素（例如textarea）时，当显示工具提示时，总会有一个<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);
      });
    });
});

https://jsfiddle.net/mikhsan/okpLzg5c/