javascript - 在 setInterval 中使用 focus()

Question

我尝试定期更改元素子级的焦点。这个例子

<div id="test">
    <p>This is a test</p>
    <p>another test</p>
    <p>Thirs test</p>
</div>

和 CSS

#test p {
    color:blue
}
#test p:active, #test p:focus {
    color:red;
}

和 JavaScript

function test() {
    var el = document.getElementById("test"),
        nodes = el.getElementsByTagName("p"),
        j = nodes.length - 1,i=0;
    var id = setInterval(
    function () {
        nodes[i].focus();
        if (i == j) {
            i = 0;
        } else {
            i++;
        }
    }, 1000);
};
test();

但是这个简单的例子不起作用。该问题与nodes[i].focus();,相关nodes[i].style.color='red';。

我知道这种方法并不完美，我感谢任何改进活动的评论。

Answer 1

问题是段落默认是不可聚焦的，活动状态是通过点击触发的，但它不是焦点事件。要使其工作，您只需使这些段落具有焦点：

<div id="test">
<p tabindex=0>This is a test</p>
<p tabindex=0>another test</p>
<p tabindex=0>Thirs test</p>

然后你可能想在某个时候清除间隔，或者更好的是，使用setTimeout（除非你希望它永远运行......）但这是一个不同的问题。这是一个包含您的确切代码但具有焦点的演示p：

http://jsfiddle.net/WvLAx/3/

Answer 2

使用此代码解决您的问题

var myInterval;
var interval_delay = 500;
var is_interval_running = false; //Optional

$(document).ready(function () {
    $(window).focus(function () {
        clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet
        if  (!is_interval_running) //Optional
            myInterval = setInterval(interval_function, interval_delay);
    }).blur(function () {
        clearInterval(myInterval); // Clearing interval on window blur
        is_interval_running = false; //Optional
    });
});

interval_function = function () {
     is_interval_running = true; //Optional
     // Code running while window is in focus
}