问题 使用jquery查找下一个最近的可聚焦元素? [关闭]


我希望我的文本框具有以下功能:每次用户按下回车键时,只要可以聚焦,它就会聚焦到下一个最接近的元素(输入,复选框,按钮,收音机,选择,a,div)。我怎么能用jquery做到这一点?


4287
2018-01-02 16:49


起源

你尝试过什么? BTW,定义 closest 请。哦,另一件事,教导用户,也许你自己也可以使用TAB键。 - gdoron
浏览器已在TAB印刷机上执行此操作。 Enter也有不同的含义......你为什么要颠覆它? - Ilia G
不要这样做。这就是tab键的用途。 Tab可在任何地方使用,并在浏览器级别实现。它是一个 非常 在JavaScript中尝试复制此功能的坏主意;这意味着您的网站会出现错误行为。互联网上的每个其他网站都设置了对Enter键表现出某种方式的期望,并且您的网站将打破这种期望。 - meagar♦
这是一个合法的技术问题,很可能是一个业务需求。我被要求将此类行为构建到后台应用程序中。有许多本机应用程序以这种方式运行。 - Bryan Allo
也许您应该捕获Enter,丢弃它,然后生成Tab事件。 - manuell


答案:


我之前已经做过了。试试我的解决方案 http://jsfiddle.net/R8PhF/3/

$(document).ready(function(){
    $('#mytextbox').keyup(function(e){
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) {
            var tabables = $("*[tabindex != '-1']:visible");
            var index = tabables.index(this);
            tabables.eq(index + 1).focus();
        }        
    });
});​

10
2018-01-02 17:05



感谢您的建设性反馈和理解问题。 +1 - Bryan Allo
这不处理自定义选项卡索引,我不认为。因此它可能适用于某个用例,但不是全部。 - Scott
这也是一个无效的焦点选择器。它需要排除tabIndex = -1,将其限制为适当的元素和约束,并包含tabIndex = 0的任何内容(就像传统上不可聚焦的div一样)。这不是你想要的,但它是一个更好的开始。选择器是唯一需要更改以使其工作的东西。还有一个可以使用的':focusable'的jquery ui选择器。 (小提琴显示破碎,更新过滤器以使其工作。) jsfiddle.net/b45rw - Scott


顺便说一句,这是一个合法的技术问题,很可能是一个业务需求。我被要求将此类行为构建到后台应用程序中。有许多本机应用程序以这种方式运行。

我通过使用具有contenteditable = true的DIV构建我的表单来满足此要求,如下例所示。

<html>
<head>
  <style type="text/css">

    div.input { border:1px solid #aaa; width:300px; }

  </style>

</head>
<body>

    <div contenteditable="true" class="input"><strong>explore the world,</strong> e.g. paris, france</div>

</body>
</html>

您可以捕获ENTER的键事件,并使用JQuery简单地将焦点设置在下一个兄弟上。

如果您需要进一步澄清,请与我们联系。

希望这可以帮助。祝你好运。


3
2018-01-02 17:03





算法明智的:

  1. 保留可以聚焦的所有元素的列表。做  为此依靠DOM。您 必须 自己保留清单。如果您不知道页面上有哪些元素,那么您已经做错了。 DOM是一个 视图 不是 数据存储,相应地对待它。许多使用jQuery的新手犯了这个错误,而使用jQuery这个错误很容易。

  2. 找到页面上所有可聚焦元素的位置。按照1.最好的方法当然是 知道 即使不看DOM,所有元素的相对位置。使用jQuery,您可以使用 .dimension()。您可能需要进行一些簿记以使此列表保持最新(即,当您的数据/视图发生更改时)。

  3. 找到当前焦点元素的位置。

  4. 使用一些算法将其与您的其他位置列表进行比较并获得 最近的 (这可能意味着很多事情,你可能知道你想要什么)。

  5. 然后将焦点设置为元素。

你可以在这里做出很多选择,有些选择取决于其他人依赖于交互和界面设计的性能。


0
2018-01-02 17:09



+1表示不将DOM视为数据存储区。 - Tvaroh
-1表示使用DOM API作为描述文档作为对象的模型的应用程序编程接口在某种程度上是反模式。 OP希望确定的浏览器行为是浏览器本身使用DOM推断的。作者尝试使用相同的逻辑不仅完全合理,通过反复试验来做到这一点,人工观察和维护基本上就是反编程方法。 - Barney
@Barney,这不是我的意思。很久以前我发布了这个,所以我不知道我的确切想法。声明如 $("*[tabindex != '-1']:visible"); 查询DOM并尝试派生出哪个元素 下一个。但是,当您渲染输入元素时,您已经知道要渲染它们的顺序,因此您不需要查询DOM。只要逻辑很简单就可以了 jQuery的 方法有效,但只要你引入一点点复杂性(例如:跳过一个字段,跳过按钮,最后一个字段应该提交),你最终会得到奇怪的代码。 - Halcyon