javascript - 防止某些元素获得焦点

标签 javascript jquery html accessibility

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

我遇到的问题是,如果一个通常可聚焦但现在不可聚焦的元素出现在我的任何白名单元素之前,这会阻止用户聚焦任何东西,因为它只是试图一遍又一遍地重新聚焦在同一个元素上再次。

有谁知道如何告诉它跳到下一个可聚焦元素?

最佳答案

如果在元素上将 tabindex 设置为 -1,它将忽略该选项卡。

不确定这是否适用于所有浏览器,但它适用于 Google Chrome。

<input type='text' value='regular'/>
<input type='text' tabindex="-1" value='with tabindex set to -1'/>

关于javascript - 防止某些元素获得焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20962020/

相关文章:

javascript - 在暂停/重置其他音频的同时播放选定的音频

php - 将复选框提交到 MySQL 时出错

javascript - 使用 Deezer Javascript SDK DZ.Event.unsubscribe 取消订阅特定订阅

javascript - JS : How can I add items to an new Objects array, 从构造函数实例化?

javascript - 有谁知道如何在本地存储由 javascript 函数所做的 css 更改?

javascript - 表单提交时在浏览器中显示加载

Javascript 字符串替换没有效果

javascript - Simogeo FileManager 查看/上传

javascript - 如何隐藏父 div,使子 div 在 HTML、CSS 中可见?

javascript - 为什么 JQuery 和 Javascript DOM 方法会去除空格?