防止某些元素受到焦点

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

我的问题是这样可以防止用户在从聚焦在任何东西如果正常聚焦元素，现在是不可聚焦的在我的任何白色上市元素之前，因为它只是试图一次又一次地重新聚焦在同一元素上。

有谁知道我可以告诉它，而不是跳到下一个可重点元素？

来源

2014-01-07 George Reith

也许这是''stopPropogation（）''语句的位置？我对你在代码之后所说的话感到有点困惑。 – itdoesntwork

@itdoesntwork'stopPropagation（）'很好，因为我们不想冒泡并浪费资源。基本上，内部标签索引在blur（）方面得到了重置，因此每次选中它时，都会尝试将焦点放在第一个变得模糊的tabbable元素上，下次您选择它时会尝试再次选择它。 –

e.preventDefault（）可以提供帮助吗？ – Eric

这个工程（更新）：

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

来源

2014-01-07 01:25:22 davidkonrad

谢谢...但这只适用于因为元素直接相邻（否则'next（）'不起作用）...请参阅http://jsfiddle.net/e96EV/2/ –

@ GeorgeReith你是对的，是盲目测试自制测试标记，你可以提供一个标记示例:) - 见上面的更新，以及更新的小提琴。为什么你关闭你的标记，例如 ?? （看到在你的小提琴更新） – davidkonrad

精美的作品。 –

如果您使某些功能被禁用，它不会得到重点。例如：

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

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

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

来源

2014-01-07 02:00:10

虽然这不适用于锚元素 –

当提交表单时，禁用的输入元素不会发送到服务器。不需要对当前的情况做很多事情，但要记住。 – Antares42

我的建议是用“表单元素”替换“something”一词，因为“disabled”仅适用于表单元素，没有别的。 – amn

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

来源

2017-08-19 13:13:13

防止某些元素受到焦点

回答

相关问题