window 失焦时恢复选项

Question

我是运行一个基于window专注的计时器。如果 window 处于焦点，则计时器将向前移动，否则将显示一条消息。我在 focusmsg div 中显示了一条焦点移出消息，并在 window 处于焦点时隐藏了此 div。因此，焦点输出消息不可见。

现在我不想显示一个简单的焦点离开消息，而是想显示一个恢复按钮，以便用户需要单击恢复按钮以确保 window 在回到 [=] 后处于焦点中22=] 对焦不准。

请记住，在用户通过单击恢复按钮确保 window 获得焦点之前，恢复按钮不应消失。

如果你能提供一个 jsfiddle 你的答案对我来说太好了！

    if(w_focus) {
        $("#focusmsg").hide();

        var timer = 0;
        var full = 10;
        timer++;

        if(timer == full) {
            var show = "Full";
            $("#timmsg").html(show);
        }


        else {
            setTimeout(adTimer, 1000);
            $("#between").hide();
        }
    } else {
        setTimeout(adTimer, 2000);

        var msg = "Focus lost! Resume now";
        $("#focusmsg").html(msg);
    }


$(document).ready(function() {

        var hidden, change, vis = {
            hidden: "visibilitychange",
            mozHidden: "mozvisibilitychange",
            webkitHidden: "webkitvisibilitychange",
            msHidden: "msvisibilitychange",
            oHidden: "ovisibilitychange" /* not currently supported */
        };             
    for (hidden in vis) {
        if (vis.hasOwnProperty(hidden) && hidden in document) {
            change = vis[hidden];
            break;
        }
    }
    if (change)
        document.addEventListener(change, onchange);
    else if (/*@cc_on!@*/false) // IE 9 and lower
        document.onfocusin = document.onfocusout = onchange
    else
        window.onfocus = window.onblur = onchange;

    function onchange (evt) {
        evt = evt || window.event;
        if (evt.type == "focus" || evt.type == "focusin")
           window_focus = true;
        else if (evt.type == "blur" || evt.type == "focusout")
           window_focus = false;
        else        
           window_focus = this[hidden] ? false : true;
    }

});

Answer 1

您可以使用以下命令在单击恢复按钮时将 w_focus 变量设置为 true。请注意，您必须删除 window.onfocus 函数并只使用它，因此它只会在用户实际单击恢复按钮时将 w_focus 变量设置为 true。

实例：

var w_focus = true;

window.onblur = function() {
  w_focus = false;
  $('#resume-button').show();
}

$('#resume-button').on('click', function() {
  w_focus = true;
  $('#resume-button').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="resume-button" style="display:none">Resume</button>

（尝试运行此代码片段，然后转到另一个选项卡或打开另一个应用程序，然后返回。您应该看到恢复按钮，它会消失并设置 w_focus 单击它后变量为真）

Link 工作 JSFiddle 示例： http://jsfiddle.net/3tzmeta4/

window 失焦时恢复选项

Resume option when window is out of focus

javascript

jquery

timer