在 Opera 12 中离开文本框时弹出框不隐藏

Question

我正在使用以下脚本在 Bootstrap 3 中使用 HTML 支持显示焦点弹出框：

$(document).ready(function () {
    $(".focus-popover").each(function (index) {
        var showPopover = function () {
            $(this).popover('show');
        };
        var hidePopover = function () {
            $(this).popover('hide');
        };
        $(this).popover({
            html: true,
            placement: $(this).attr('data-placement'),
            trigger: 'manual'
        })
        .focus(showPopover)
        .blur(hidePopover);
    })
});

但是这个输入...

<input type="date" ID="test2" class="form-control focus-popover" data-original-title="This is my title" data-placement="top" data-container="body" data-content="Click away and see how this will be dismissed.&lt;br /&gt;However, on Opera 12 it will remain."></input>

... 在 Opera 12 中存在某种错误。由于输入类型是“日期”而不是“文本”，因此在离开文本框时不会隐藏弹出框。

请查看 Opera 12 以及任何其他浏览器中的 this Example。

我该怎么做才能让它正常工作？

Answer 1

显然，日期选择器会阻止浏览器在通过单击离开失去焦点后触发模糊事件。

只有在您保持制表键失去焦点或通过选择日期更改值时，它才会触发模糊事件。

因此，基本上可以通过使用另一个元素的单击/焦点来模拟模糊事件。

解决方法

$(document).ready(function () {
    $(".focus-popover").each(function (index) {
        var showPopover = function () {
            $(this).popover('show');
        };
        var hidePopover = function () {
            $(this).popover('hide');
        };
        $(this).popover({
            html: true,
            placement: $(this).attr('data-placement'),
            trigger: 'manual'
        })
        .focus(showPopover)
        .blur(hidePopover);
    })
    // The nasty Opera < 12 "workaround"
    if ( window.opera && +window.opera.version() <= 13 ) {
        var $buggyInput = $("#test2"), // Caching is important!
            buggyInputFocus = false,
            buggyFocus = function(event) {
                event.stopPropagation();
                if(!buggyInputFocus) {
                    $(this).popover('show');
                    buggyInputFocus = true;
                }
            },
            buggyBlur = function(event) {
                $(this).popover('hide');
                buggyInputFocus = false;
            }
        ;
        // The focus also stop triggering if it was blurred then clicked back, so we added a click. It doesn't run buggyFocus twice since it only execute itself if it hasn't been focused first
        $buggyInput.on({
            "focus": buggyFocus,
            "click": buggyFocus,
            "blur":buggyBlur,
            "change":buggyBlur // On change is also important, you don't want to leave it open when it changes
        })
        // Since it doesn't the blur event, we fake it by capturing focus or click on the html tag
        $("html").on({
            click: function() {
                if ( buggyInputFocus ) $buggyInput.trigger("blur");
            },
            focus: function() {
                if ( buggyInputFocus ) $buggyInput.trigger("blur");
            }
        })
    }
});

小提琴：http://jsfiddle.net/5wsq38u3/4/

编辑：超过 1 个日期输入

$(document).ready(function () {
    $(".focus-popover").each(function (index) {
        var showPopover = function () {
            $(this).popover('show');
        };
        var hidePopover = function () {
            $(this).popover('hide');
        };
        $(this).popover({
            html: true,
            placement: $(this).attr('data-placement'),
            trigger: 'manual'
        })
        .focus(showPopover)
        .blur(hidePopover);
    })
    // The nasty Opera < 12 "workaround"
    if (window.opera && +window.opera.version() < 13) {
        var $buggyInputs = $(".operaFix"), // Caching is important!
            buggyInputFocus = false,
            buggyInput = {}, // We store an instance of the focused element
            buggyFocus = function(event) {
                event.stopPropagation();
                if(!buggyInputFocus) {
                    $(buggyInput).popover('hide');
                    $(this).popover('show');
                    buggyInputFocus = true;
                    buggyInput = $(this);
                }
                else if ($(buggyInput).attr("id") !== $(this).attr("id")){
                   $(buggyInput).trigger("blur")
                }
            },
            buggyBlur = function(event) {
                $(this).popover('hide');
                buggyInputFocus = false;
                buggyInput = {}
            }
        ;
        // The focus also stop triggering if it was blurred then clicked back, so we added a click. It doesn't run buggyFocus twice since it only execute itself if it hasn't been focused first
        $buggyInputs.on({
            "focus": buggyFocus,
            "click": buggyFocus,
            "blur": buggyBlur,
            "change": buggyBlur // On change is also important, you don't want to leave it open when it changes
        })
        // Since it doesn't the blur event, we fake it by capturing focus or click on the html tag
        $("html").on({
            click: function() {
                if (buggyInputFocus) $(buggyInput).trigger("blur");
            },
            focus: function() {
                if (buggyInputFocus) $(buggyInput).trigger("blur");
            }
        })
    }
});

JSBin：http://jsbin.com/xucagomutera/1/edit