防止某些元素接收焦点

So I have the following function. What it does is listens for the focus event on all elements. If that element is either in $mobileMenu or $menuItems it permits it otherwise it removes the focus:

我有下面的函数。它所做的是监听所有元素的焦点事件。如果该元素在$mobileMenu或$menuItems中，它允许它，否则它将删除焦点:

var $body = $("body");
var $mobileMenu = $("#mobile-menu");
var $menuItems = $("#main-menu a");

$body.on("focus.spf", "*", function(e){
  e.stopPropagation();
  $this = $(this);

  // Prevent items from recieving focus and switching view
  if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
    $this.blur();
  } else {
    console.log(this);
  }
})

The issue I have is that this prevents the user from focusing on anything whatsoever if a normally focusable element that is now non-focusable precedes any of my white-listed elements as it just attempts to refocus on the same element over and over again.

我的问题是，如果一个通常可调焦的元素现在是不可调焦的，它在我的任何一个白列表的元素之前，只是试图一遍又一遍地重新关注同一元素，这就会阻止用户关注任何内容。

Does anyone know how I can tell it to instead skip to the next focusable element?

有人知道我如何让它跳转到下一个可聚焦元素吗?

3 个解决方案

#1

This works (updated) :

这是(更新):

$body.on("focus.spt", "*", function(e){
  $this = $(this);
  if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
    $this.blur();
    var next=$this.nextAll().find('a,input');
    if (next.length>0) next[0].focus();
  } else {
    console.log('ok',this);
    e.stopPropagation();
  }
})

(updated) fiddle -> http://jsfiddle.net/CADjc/ You can see in the console which elements that receives focus (main-menu a and mobile-menu)

(更新)小提琴-> http://jsfiddle.net/CADjc/您可以在控制台中看到哪些元素接收焦点(主菜单a和移动菜单)

Tested on :

测试:

<input type="text" tabindex="1" value="test">
<span><input type="text" tabindex="2" value="test"></span>
<div><input type="text" id="mobile-menu" tabindex="3" value="mobile-menu"></div>
<div><span>
    <div id="main-menu">
        <a tabindex="4">main-menu</a>
        <a tabindex="5">main-menu</a>
    </div>
</span></div>
<span>
<input type="text" tabindex="6" value="test">
</span>

#2

If you make something disabled, it won't receive focus. For example:

如果你使某件东西被禁用，它就不会受到关注。例如:

<input type="text" disabled="disabled" />

Do add it programmatically, you could do:

可以通过编程方式添加，可以:

var el = document.getElementById('disableme');
el.setAttribute('disabled', 'disabled');

#3

attr("readonly","readonly"), prevent input focus and value ARE send to the server.

attr(“readonly”，“readonly”)，防止输入焦点和值被发送到服务器。

#1