使用jQuery查找下一个最近的可聚焦元素？

Question

使用jQuery查找下一个最近的可聚焦元素？

javascriptjquerytabindex

12

我希望我的文本框具有以下功能：每当用户按下“回车”键时，它都会聚焦到最接近的下一个元素（包括输入框、复选框、按钮、单选框、选择框、a标签和div），只要它们可以被聚焦。如何使用jQuery实现这一功能？

- sadcat

1

你尝试过什么？顺便问一下，可以定义一下“closest”是什么吗？哦，还有一件事，教用户（也许包括你自己）使用TAB键。 - gdoron

2

浏览器已经在按下TAB键时执行了此操作。回车键也有不同的含义... 为什么要破坏它呢？ - Ilia G

2

不要这样做。这就是制表键的作用。制表键在任何地方都可以使用，并且已在浏览器级别实现。尝试在JavaScript中复制此功能是一个极其糟糕的想法；这意味着您的网站将表现不正确。互联网上的每个其他网站都会设定某种期望，使得回车键以特定方式运行，而您的网站将打破这种期望。 - user229044

8

这是一个合理的技术问题，很可能是商业需求。我经常被要求在后台应用程序中构建这种行为。有许多本地应用程序是这样运作的。 - Bryan Allo

1

也许你应该捕获回车键，将其丢弃，然后生成Tab事件。 - manuell

显示剩余6条评论

3个回答

4

顺便说一下，这是一个合法的技术问题，很可能是业务需求。我经常被要求在后台应用程序中构建这种行为。有许多本地应用程序都是这样运作的。

我通过使用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>

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

如果需要进一步澄清，请告诉我。

希望这能帮到你。祝好运。

- Bryan Allo

0

算法方面：

保持一个可以聚焦的所有元素列表。不要依赖于DOM。你必须自己维护这个列表。如果你不知道页面上有哪些元素，那么你已经做错了什么事情。DOM是一个“视图”，而不是一个“数据存储”，因此要相应地对待它。许多使用jQuery的新手都会犯这个错误，而且使用jQuery很容易犯这个错误。
找到页面上所有可聚焦元素的位置。根据第1点，当然最好的方法是即使不查看DOM也能“知道”所有元素的相对位置。使用jQuery可以使用.dimension()。您可能需要进行一些记录以使此列表保持最新（即当您的数据/视图更改时）。
找到当前聚焦元素的位置。
使用某种算法将其与其他位置列表进行比较，并获取“最接近”的元素（这可能意味着很多事情，您可能知道您想要什么）。
然后将焦点设置为该元素。

在这里你有很多选择，一些取决于性能，另一些则取决于交互和界面设计。

- Halcyon

1

不要把DOM视为数据存储库，这是一个好习惯。 - Tvaroh

1

-1 是在暗示使用 DOM API 作为描述文档对象模型的应用程序编程接口是一种反模式。OP 想要确定的浏览器行为是浏览器本身使用 DOM 推断出来的。作者试图使用相同的逻辑是完全合理的，但通过试错和人工观察和维护来实现这一点基本上是反编程方法。 - Barney

@Barney，这不是我建议的。我很久以前发布了这个帖子，所以我不知道我的确切想法是什么。像$("*[tabindex != '-1']:visible");这样的语句会查询DOM并尝试推导出哪个元素是_next_。但是，当您渲染输入元素时，您已经知道它们的呈现顺序，因此您不需要查询DOM。只要逻辑简单，_jQuery_方法就可以工作，但是一旦引入了一点复杂性（例如：跳过字段、跳过按钮、最后一个字段应该提交），您将得到奇怪的代码。 - Halcyon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- phnkha · Accepted Answer

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