防止某些元素获得焦点

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

将

tabindex

属性设置为

-1

tabindex='-1'

将忽略可聚焦选项卡，这意味着焦点将跳到下一个可聚焦元素（如果存在）。

<input/>
<input tabindex='-1' value='tabindex set to -1'/>

这不会阻止通过单击输入元素来直接聚焦，因为用户仍然可以编辑该字段，并且必须聚焦它才能进行编辑。

---

设置

inert

属性：

<input/>
<input inert value='cannot be focused nor edited'/>

---

上面的示例中有 2 个输入的原因是让第一个输入可聚焦，因此很明显，当单击 TAB 键时，下一个输入将不会获得焦点。

Answer 2

这有效（已更新）：

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

（更新）小提琴 -> 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 3

如果你禁用某些东西，它就不会获得焦点。例如：

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

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

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

Answer 4

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

Answer 5

我过去的项目之一中的纯 CSS 解决方案

/* Prevents all mouse interactions */
.disabled-div {
  opacity: 0.5;
  pointer-events: none;
}

/* Prevents all other focus events */
.disabled-div:focus,
.disabled-div:focus-within {
  visibility: hidden;
}

<h1>CSS Only Disable with Prevent Focus</h1>

<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>
<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>

对焦时轻微闪烁。这是因为当它接收焦点时，可见性被设置为“隐藏”，焦点丢失并且可见性再次设置回“可见”。这实际上很好，因为用户现在在浏览禁用字段时知道焦点在哪里......