Popover не се крие при напускане на текстовото поле в 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");
            }
        })
    }
});

Fiddle: 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