Всплывающее окно не скрывается при выходе из текстового поля в Opera 12

Я использую следующий скрипт для отображения всплывающих окон в фокусе с поддержкой HTML в Bootstrap 3:

$(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, а также любой другой браузер.

Что я могу сделать, чтобы он работал правильно?


person Martin Braun    schedule 02.09.2014    source источник
comment
входные теги не могут иметь содержимого, поэтому у вас не должно быть </input>.   -  person cvrebert    schedule 03.09.2014
comment
Bootstrap официально не поддерживает Opera 12, так что удачи.   -  person cvrebert    schedule 03.09.2014


Ответы (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

person jsachs    schedule 03.09.2014
comment
Благодарю за ваш ответ. Это работает, пока у меня есть только одно текстовое поле даты на моем веб-сайте. Можете ли вы заставить его работать с несколькими элементами управления датой? См. это и пропустите оба поля даты, чтобы понять, что я имею в виду. - person Martin Braun; 03.09.2014
comment
Там я отредактировал ответ с альтернативой для нескольких элементов ввода. - person jsachs; 03.09.2014
comment
Он немного мигает при переключении между этими вводами даты, однако работает довольно хорошо и должен быть достаточным для пользователей Opera 12. Большое спасибо. - person Martin Braun; 04.09.2014