输入键以创建新行并聚焦当前输入字段

Enter key to create new row and focus current input field

本文关键字：输入 字段 聚焦 新行 创建      更新时间：2023-09-26
<table width="500" border="1">
    <tr>
        <td>No.</td>
        <td>Name</td>
        <td>Age</td>
        <td>Phone</td>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text" class="inputs" name="name_1" id="name_1" /></td>
        <td><input type="text" class="inputs" name="age_1" id="age_1" /></td>
        <td><input type="text" name="phone_1" class="inputs lst" id="phone_1" /></td>
    </tr>
</table>
<script>
    var i = $('table tr').length;
    $('.lst').on('keyup', function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            html = '<tr>';
            html += '<td>' + i + '</td>';
            html += '<td><input type="text" class="inputs" name="name_' + i + '" id="name_' + i + '" /></td>';
            html += '<td><input type="text" class="inputs" name="age_' + i + '" id="age_' + i + '" /></td>';
            html += '<td><input type="text" class="inputs lst" name="phone_' + i + '" id="phone_' + i + '" /></td>';
            html += '</tr>';
            $('table').append(html);
            $(this).focus().select();
            i++;
        }
    });
    $('.inputs').keydown(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            var index = $('.inputs').index(this) + 1;
            $('.inputs').eq(index).focus();
        }
    });
</script>

在这种形式中，最初专注于第一个文本框，然后按回车键，它会自动聚焦到死胡同附近的输入字段，而我们按回车键然后它创建新行并专注于新创建的行中显示的初始输入字段之后，当我们按回车键时，它不会聚焦到文本字段附近，请帮助解决此问题。
在第一行它工作正常，而我们进入第二行它不起作用

请帮忙

您需要对动态生成的元素进行事件委派，如下所示。

var i = $('table tr').length;
$(document).on('keyup', '.lst', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) {
    html = '<tr>';
    html += '<td>' + i + '</td>';
    html += '<td><input type="text" class="inputs" name="name_' + i + '" id="name_' + i + '" /></td>';
    html += '<td><input type="text" class="inputs" name="age_' + i + '" id="age_' + i + '" /></td>';
    html += '<td><input type="text" class="inputs lst" name="phone_' + i + '" id="phone_' + i + '" /></td>';
    html += '</tr>';
    $('table').append(html);
    $(this).focus().select();
    i++;
  }
});
$(document).on('keydown', '.inputs', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) {
    var index = $('.inputs').index(this) + 1;
    $('.inputs').eq(index).focus();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="500" border="1">
    <tr>
        <td>No.</td>
        <td>Name</td>
        <td>Age</td>
        <td>Phone</td>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text" class="inputs" name="name_1" id="name_1" /></td>
        <td><input type="text" class="inputs" name="age_1" id="age_1" /></td>
        <td><input type="text" name="phone_1" class="inputs lst" id="phone_1" /></td>
    </tr>
</table>

相关文章：