Question

我知道有几个条目已经处理过这类问题，我已经看了很多，但是在我的情况下似乎都没有。任何有关这方面的帮助将不胜感激。

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

以下是我的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

在比较中使用.is()。

if( $(event.target).is($inputs.last()) ) { ... }

尽管如此，您可能需要检查匹配元素的匹配表达式（$inputs和$addButton）。

Answer 2

您需要使用find()代替孩子

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

.children（）方法与.find（）的区别仅在于.children（）在.sind（）可以遍历时沿DOM树向下移动一个级别在多个级别选择后代元素（孙子，等）。

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

如何使用Jquery中的enter键来标记表单元素

2 个答案: