javascript 使用 jquery 查找下一个最近的可聚焦元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14125842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find next closest focusable element using jquery?
提问by sadcat
I want my text boxes have the feature that every time users press enter, it will focus to next closest element whatsoever they are(input, checkbox, button, radio, select, a, div) as long as they can be focused. How can I do that using jquery?
我希望我的文本框具有这样的功能：每次用户按下 Enter 键时，它都会聚焦到下一个最近的元素（输入、复选框、按钮、单选、选择、a、div），只要它们可以被聚焦。我如何使用 jquery 做到这一点？
回答by phnkha
I've already done that before. Try my solution here http://jsfiddle.net/R8PhF/3/
我以前已经这样做了。在这里尝试我的解决方案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();
}
});
});?
回答by Bryan Allo
By the way, this is a legitimate technical question and could very well be a business requirement. I have been asked to build such behavior into back office apps quite offten. There are many native apps that behave this way.
顺便说一下，这是一个合法的技术问题，很可能是业务需求。我经常被要求将这种行为构建到后台应用程序中。有许多本机应用程序以这种方式运行。
I addressed this requirement by building my form using DIVs with contenteditable=true like the example below.
我通过使用带有 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>
You can the capture the key event for ENTER and simply set focus on the next sibling using JQuery.
您可以捕获 ENTER 的键事件，并使用 JQuery 将焦点设置在下一个兄弟上。
Let me know if you need further clarification.
如果您需要进一步说明，请告诉我。
Hope this helps. Good Luck.
希望这可以帮助。祝你好运。
回答by Halcyon
Algorithm-wise:
算法方面：
Keep a list of all elements that can be focussed. Do notrely on the DOM for this. You mustkeep the list yourself. If you don't know which elements are on the page you've already done something wrong. The DOM is a viewnot a datastore, treat it accordingly. Many novices who use jQuery make this mistake, and with jQuery this mistake is easy to make.
Find the position of all focussable elements on the page. In accordance with 1. the best way is of course to knowthe relative position of all elements even without looking at the DOM. With jQuery you can use
.dimension(). You may have to do some bookkeeping to keep this list up to date (ie. when your data/view changes).Find the position of the current focussed element.
Use some algorithm to compare it to your list of other positions and get the closest(this can mean a lot of things, you probably know what you want).
Then set the focus to the element.
保留所有可以聚焦的元素的列表。不要不依赖DOM这一点。你必须自己保留这份清单。如果您不知道页面上有哪些元素，那么您就已经做错了。DOM 是一个视图而不是一个数据存储，相应地对待它。许多使用 jQuery 的新手都会犯这个错误，而使用 jQuery 很容易犯这个错误。
找到页面上所有可聚焦元素的位置。按照1.最好的办法当然是不用看DOM就知道所有元素的相对位置。使用 jQuery，您可以使用
.dimension(). 您可能需要做一些簿记以保持此列表是最新的（即，当您的数据/视图更改时）。查找当前焦点元素的位置。
使用某种算法将其与您的其他职位列表进行比较并获得最接近的（这可能意味着很多事情，您可能知道自己想要什么）。
然后将焦点设置到元素上。
There are many choices you can make here, some depend on performance others depend on interaction and interface design.
您可以在这里做出很多选择，有些取决于性能，有些取决于交互和界面设计。
