Question

当使用Bootstrap popover进行输入错误检查时，我正在尝试检查初始focus和后续keyup上的输入。例如，这是最初的焦点工作正常：

$(document).ready(function(){                      
$('.link input').popover({                       
  title:'Check for Caps:',
  trigger:'focus',
  placement:'right',
  html:'true',
  container:'body',
  content: function() {
     var content = $(this).val();
     var ok = '<i class="fa fa-check-circle"></i>';
     var notok = '<i class="fa fa-times-circle"></i>';
     var noCaps = content.search(/[A-Z]/) + 1 > 0 ? notok:ok;                       
     var msg = '<ul class="reqs"><li>'+ noCaps +' No Caps Please</li></ul>';
     return msg;
     }                                                  
   });  
});

但是，我在哪里可以添加一个检查后续键盘输入的函数？它是在这个函数之外还是之内？

这不是另一篇文章的副本。 This Post just shows how to manually call the popover已经在bootstrap文档中有详细记录。如果这就是我需要的全部内容，我会从文档中得到它。

Answer 1

popover的内容仅在初始化时获得设置。触发器仅在显示内容时生效，不会允许您在每次显示弹出窗口时运行该功能。

您需要初始化弹出窗口。然后你还需要在keyup上运行一个函数。在下面的示例中，我将noCaps更改为内容，以便您可以了解事件正在触发和更新。

$(document).ready(function () {
    $('.link input').popover({
        title: 'Check for Caps:',
        trigger: 'focus',
        placement: 'bottom',
        html: 'true',
        container: 'body'
    }).on('keyup focus', function () {
        var element = $(this)
        var content = element.val();
        var ok = '<i class="fa fa-check-circle"></i>';
        var notok = '<i class="fa fa-times-circle"></i>';
        var noCaps = content.search(/[A-Z]/) + 1 > 0 ? notok : ok;
        var msg = '<ul class="reqs"><li>' + noCaps + ' No Caps Please</li></ul>';

        //This is the important stuff
        var popover = element.attr('data-content', msg).data('bs.popover');
        popover.setContent();
        popover.$tip.addClass(popover.options.placement);
    });
});

jsfiddle链接： http://jsfiddle.net/uzLuzzuz/2/

我也做过类似于bootsnipp.com的事情 http://bootsnipp.com/snippets/featured/password-strength-popover

Bootstrap Popover焦点和键盘

1 个答案: