12

我希望我的文本框具有这样的功能，即每次用户按 Enter 键时，只要它们可以被聚焦，它就会聚焦到下一个最接近的元素（输入、复选框、按钮、单选、选择、a、div）。我怎样才能使用 jquery 做到这一点？

4

3 回答 3

12

我以前已经这样做了。在这里尝试我的解决方案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();
        }        
    });
});​
于 2013-01-02T17:05:45.173 回答
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>

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

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

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

于 2013-01-02T17:03:45.257 回答
0

算法方面：

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

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

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

  4. 使用某种算法将其与您的其他职位列表进行比较并获得最接近的（这可能意味着很多事情，您可能知道自己想要什么）。

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

您可以在这里做出很多选择，有些取决于性能，有些取决于交互和界面设计。

于 2013-01-02T17:09:23.650 回答