使用jquery找到下一个最近的可聚焦元素

Find next closest focusable element using jquery?

本文关键字：聚焦 元素 最近 下一个 jquery 使用      更新时间：2023-09-26

我希望我的文本框具有这样的功能，即每次用户按回车键时，它都会聚焦到下一个最近的元素，无论它们是什么(输入，复选框，按钮，单选，选择，a,div)，只要它们可以聚焦。我如何使用jquery做到这一点?

我以前已经这样做过了。试试我的解决方案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();
        }        
    });
});​

顺便说一下，这是一个合理的技术问题，很可能是一个业务需求。我经常被要求在后台应用程序中构建这样的行为。有很多原生应用都是这么做的。

我通过使用div和contenteditable=true来构建我的表单，就像下面的例子一样。

<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简单地将焦点设置在下一个兄弟节点上。

如果你需要进一步的说明，请告诉我。

希望这对你有帮助。好运。

算法:

  1. 列出所有可以集中的元素。要而不是依赖于DOM。你必须自己保存列表。如果您不知道页面上的哪些元素，那么您已经做错了。DOM是一个视图而不是一个数据存储，请相应地对待它。很多使用jQuery的新手都会犯这个错误，使用jQuery很容易犯这个错误。

  2. 查找页面上所有可聚焦元素的位置。根据…最好的方法当然是知道所有元素的相对位置，甚至不用查看DOM。使用jQuery，您可以使用.dimension()。你可能需要做一些记帐来保持这个清单的更新。

  3. 查找当前聚焦元素的位置

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

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

您可以在这里做出许多选择，有些取决于性能，有些取决于交互和界面设计。
相关文章：