Question

所以我有以下功能。它的作用是监听所有元素的焦点事件。如果该元素位于$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);
  }
})

我遇到的问题是，如果现在不可聚焦的正常可聚焦元素在我列出的任何白色元素之前，因为它只是试图一遍又一遍地重新聚焦在同一个元素上，这会阻止用户专注于任何事情。试。

有谁知道如何告诉它而不是跳到下一个可聚焦元素？

Answer 1

这有效（更新）：

$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();
  }
})

（更新）小提琴 - ＆gt;的 http://jsfiddle.net/CADjc/ 您可以在控制台中看到哪些元素获得了焦点(main-menu a和mobile-menu）

经过测试：

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

Answer 2

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

Answer 3

如果在元素上将tabindex设置为“ -1”，它将忽略该标签。不确定这是否适用于所有浏览器，但是否适用于Google Chrome。

binary:encode_unsigned/2

Answer 4

如果您禁用某些内容，则无法获得焦点。例如：

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

以编程方式添加，您可以这样做：

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

防止某些元素获得焦点

4 个答案: