Question

我有一个带有文本输入的Bootstrap popover。如果用户在弹出窗口外单击，我希望弹出窗口隐藏，但如果弹出窗口内的任何内容（例如输入字段）获得焦点，则保持打开状态。

使用trigger:focus选项不起作用，因为在显示弹出窗口后，单击任何内容（包括弹出框）会隐藏它。

我已尝试添加$('.popover').on('blur')功能但我不确定如何在触发模糊事件时检查弹出窗口内的某些内容是否有焦点。

这个小提琴演示了不受欢迎的行为 http://jsfiddle.net/Lcsqjdgu/

Answer 1

这应该像你描述的那样工作。

显示弹出框时，将焦点设置在输入上。
隐藏模糊处的popover。

$('button').on('shown.bs.popover', function() {
  $('#new_input').focus();
})

$(document).on('blur','.popover', function() {
   $(this).popover('hide');
});

Answer 2

您可以尝试使用手动触发器。这将允许您完全控制弹出窗口显示或隐藏的时间/方式。

$('#bravo').popover({
    html: true,
    trigger: 'manual',
    content: '<div class="input-group">'+
              '<input id="new_input" type="text" placeholder="My Dashboard" class="form-control">'+
              '<span class="input-group-btn">'+
                '<button class="btn btn-success btn-default" type="button">Create</button>'+
              '</span>'+
        '</div>'
});

$('#bravo').click(function() {
    $(this).popover('toggle');
});

See Fidde here.

如果popover中的元素具有焦点，则隐藏模糊上的bootstrap popover

2 个答案: