Question

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

Answer 1

我之前已经这样做了。在此尝试我的解决方案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();
        }        
    });
});

Answer 2

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

我通过使用带有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将焦点设置在下一个兄弟上。

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

希望这会有所帮助。祝你好运。

Answer 3

算法逐：

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

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

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

3 个答案: