jquery - 如何使用 jQuery 中的 Enter 键切换表单元素

Question

我知道已经有一些条目正在处理此类问题，并且我已经查看了很多条目，但似乎没有一个条目适合我的情况。对此的任何帮助将不胜感激。

我拥有的是动态生成的表单(可以有不同数量的输入)。我需要使用我的 enter 键来浏览它们。目前，tab 键选项卡可以很好地穿过元素，但我的标准要求我启用 Enter 键。当我到达最终输入并按下 Enter 时，它需要执行当前通过 a 标签完成的提交操作

下面是我的 HTML 表单的代码片段以及处理 keypress 事件的 JS

<div class="credential_form">
<div class="error_msg">
    <h4>There was a problem connecting.</h4>
</div>
<div class="credential_inputs">
    <div class="txt_wrapper">
        <input type="text" style="width: 130px">
    </div>
    <div class="txt_wrapper">
        <input type="password" style="width: 130px; display: none;" class="real">
    </div>
    <div class="clear"></div>
</div>
<div class="add_button">
    <a class="button" href="javascript:void(0)"><span>Add</span></a>
</div>
<div class="clear"></div>
<div class="sub_input">
    <div class="link">
        <span class="sub_text">Forget your details? Go to&nbsp;</span>
        <a class="sub_link" href="http:somewhere.com">Somewhere</a>
    </div>
</div>
</div>

由于某种原因，我的集合变量无法识别 if 条件中的当前元素。

var code = (event.keyCode ? event.keyCode : event.which);

if (code == 13) {

var $inputs = $(event.target).closest('.credential_inputs').children($(':input:visible'));
var $addButton = $(event.target).closest('.credential_form').children($('a:first-child'));

if ( $(event.target) == $inputs[$inputs.length - 1] ) {
    $addButton.click()
} else {
    $(event.target).closest(".credential_inputs").nextAll('input:first').focus();
}
}

谢谢

Answer 1

您需要使用find()而不是children

var $inputs = $(event.target).closest('.credential_inputs').find(':input:visible');

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

这意味着 $('.credential_inputs').children() 只会返回您的 .txt_wrapper div，而不会进一步遍历。