时间戳

首页 > 解决方案 > $(this).next('input').focus(); 不能在内部和形式上工作

jquery - $(this).next('input').focus(); 不能在内部和形式上工作

问题描述

我试图强制回车键充当制表键。

我在关注这个 jsFiddle点击这里查看 JSFiddle

如果我的 html.

<form name='form' method='post'>
<div class='row'>
    <div class='form-group row'>
        <label class='col-sm-4 control-label text-primary' for='nickname'>First Name:</label>
        <div class='col-sm-8'>
            <input id='nickname' type='text' name='txtfname' class='input-enter form-control'/>
        </div>
        </div>
        <div id='div_name' class='form-group row'>
        <label class='col-sm-4 control-label text-primary' for='nickname'>Last Name:</label>
        <div class='col-sm-8'>
            <input id='nickname' type='text' name='txtlname' class='input-enter form-control'/>
        </div>
    </div>
</div>
</form>

这是我的 jquery 代码。jQuery 版本 3.1.1。

$('input').keypress(function(e) {
if (e.which == 13) {
    // $(this).next('input').focus();
    // $(this).parent().next().find('.input-enter').focus();  
    $(this).closest('.input-enter').find('input').focus();
    e.preventDefault();
    alert("Enter key has been pressed!");
}
});

更新：当我按下 Enter 键时会弹出警告框。第二次更新。

完整的html代码。不要担心 id 是多个。我只是复制和粘贴。

<form name='form' method='post'>
<div class='row'>
<div class='col-md-6'>
    <div class='form-group row'>
        <label class='col-sm-4 control-label text-primary' for='nickname'>First Name:</label>
        <div class='col-sm-8'>
            <input id='nickname' type='text' name='txtfname' class='input-enter form-control'/>
        </div>
    </div>
    <div id='div_name' class='form-group row'>
        <label class='col-sm-4 control-label text-primary' for='nickname'>L:</label>
        <div class='col-sm-8'>
            <input id='nickname' type='text' name='txtlname' class='input-enter form-control'/>
        </div>
    </div>
</div>
<div class='col-md-6'>
    <div class='form-group row'>
        <label class='col-sm-4 control-label text-primary' for='nickname'>First Name:</label>
        <div class='col-sm-8'>
            <input id='nickname' type='text' name='txtfname' class='input-enter form-control'/>
        </div>
    </div>
    <div id='div_name' class='form-group row'>
        <label class='col-sm-4 control-label text-primary' for='nickname'>L:</label>
        <div class='col-sm-8'>
            <input id='nickname' type='text' name='txtlname' class='input-enter form-control'/>
        </div>
    </div>
</div>
</div>
</form>

标签： jqueryhtmlfocus

解决方案

尝试改变

$(this).closest('.input-enter').find('input').focus();

至

$(this).closest('.row').nextAll(':has(.input-enter):first').find('.input-enter').focus();

此外，您应该修复您的输入 id 属性，因为它的双精度（“昵称”被使用两次，这是无效的）。现在 'enter' 像 'tab' 一样工作 - 这里是FIDDLE

问题更新后

使用此代码：

$('input').keypress(function(e) {
if (e.which == 13) {

    let focusable = $('form').find('input')
    let next = focusable.eq(focusable.index(this)+1);
    if (next.length) {
      next.focus();
    } else {
            // form.submit();
    }
    return false;
    e.preventDefault();
}
});

这是FIDDLE。

推荐阅读