CodeIgniter项目：输入框录入内容后自动添加行并聚焦新输入框

我在PHP CodeIgniter项目中已实现输入框动态添加行功能，现在需要优化：当输入框录入内容后，自动添加新的输入行，且光标自动聚焦到新创建的输入框。

原HTML代码 #

<div style="height:200px;width:1200px;border:2px solid #ccc;overflow:auto;">
    <table id="rf_id">
        <div class="form-group row col-sm-5" id="rf">
            <tbody id="rf123">
                <tr>
                    <td> </td>
                    <td> <input type="text" placeholder="Enter product RFID code"
                            id="rfid" class="form-control" name="rfid[]"></td>

                    <td> <i class="fa fa-trash-o delete_rfid"
                            style="font-size:25px;color:red"
                            onclick="removeOptionRow('0');"></i>
                        <i class="fa fa-plus-circle tr_rfid_add" id="tr_rfid_add"
                            style="font-size:25px;color:green" aria-hidden="true"
                            onclick="addFilterOptionRow();"></i>
                    </td>
                </tr>
            </tbody>
        </div>
    </table>
</div>

<div class="form-group row">
    <div class="col-sm-4">
        <input type="submit" id="assign_save" class="btn btn-success margin-bottom"
            value="<?php echo $this->lang->line('save') ?>"
            data-loading-text="Adding...">
    </div>
</div>

原可运行的动态添加行JS代码 #

$("#rfid").focus();

function removeOptionRow(filter_row) {
    $('#invrow' + filter_row).remove();
}
var filter_row = 1;

function addFilterOptionRow() {
    html = '<tr id="invrow' + filter_row + '">';
    html += '<td> </td>';
    html += '<td><input type="text" placeholder="Enter product RFID code" id="rfid" class="form-control" id="option_name' + filter_row + '" name="rfid[]" ></td>';
    html += '<td> <i class="fa fa-trash-o delete_rfid" style="font-size:25px;color:red" onclick="removeOptionRow(' + filter_row + ');"></i>';
    html += ' <i class="fa fa-plus-circle tr_rfid_add" onclick="addFilterOptionRow();" style="font-size:25px;color:green" aria-hidden="true"></i>';
    html += '</td>';
    html += '</tr>';
    $('#rf123').append(html);
    filter_row++;
    return false;
}

之前尝试的错误代码（不符合需求） #

$(document).ready(function(){
 $('#tr_rfid_add').click(function(){
    });
    if($('.#rfid').val()){
  // set time out 5 sec
     setTimeout(function(){
        $('#tr_rfid_add').trigger('click');
    }, 4000);
}
});

解决方案 #

1. 修正HTML的ID重复问题 #

原代码中多个输入框使用了相同的id="rfid"，违反HTML唯一ID规范，需改为类选择器rfid-input统一管理：

<div style="height:200px;width:1200px;border:2px solid #ccc;overflow:auto;">
    <table id="rf_id">
        <div class="form-group row col-sm-5" id="rf">
            <tbody id="rf123">
                <tr>
                    <td> </td>
                    <td> <input type="text" placeholder="Enter product RFID code"
                            class="form-control rfid-input" name="rfid[]"></td>

                    <td> <i class="fa fa-trash-o delete_rfid"
                            style="font-size:25px;color:red"
                            onclick="removeOptionRow('0');"></i>
                        <i class="fa fa-plus-circle tr_rfid_add" id="tr_rfid_add"
                            style="font-size:25px;color:green" aria-hidden="true"
                            onclick="addFilterOptionRow();"></i>
                    </td>
                </tr>
            </tbody>
        </div>
    </table>
</div>

<div class="form-group row">
    <div class="col-sm-4">
        <input type="submit" id="assign_save" class="btn btn-success margin-bottom"
            value="<?php echo $this->lang->line('save') ?>"
            data-loading-text="Adding...">
    </div>
</div>

2. 修改JS逻辑实现自动添加与聚焦 #

调整addFilterOptionRow函数确保新输入框唯一，并添加输入事件监听实现自动触发：

// 初始聚焦第一个输入框
$(".rfid-input").first().focus();

function removeOptionRow(filter_row) {
    $('#invrow' + filter_row).remove();
}

var filter_row = 1;

function addFilterOptionRow() {
    const rowId = filter_row;
    let html = '<tr id="invrow' + rowId + '">';
    html += '<td> </td>';
    html += '<td><input type="text" placeholder="Enter product RFID code" class="form-control rfid-input" name="rfid[]"></td>';
    html += '<td> <i class="fa fa-trash-o delete_rfid" style="font-size:25px;color:red" onclick="removeOptionRow(' + rowId + ');"></i>';
    html += ' <i class="fa fa-plus-circle tr_rfid_add" onclick="addFilterOptionRow();" style="font-size:25px;color:green" aria-hidden="true"></i>';
    html += '</td>';
    html += '</tr>';
    
    $('#rf123').append(html);
    // 聚焦新创建的输入框
    $('#invrow' + rowId + ' .rfid-input').focus();
    filter_row++;
    return false;
}

// 监听输入事件，自动添加新行
$(document).on('input', '.rfid-input', function() {
    const $currentInput = $(this);
    // 仅当当前输入框有内容且为最后一行时触发
    if ($currentInput.val().trim() !== '' && $currentInput.closest('tr').is('#rf123 tr:last')) {
        // 避免重复添加，检查下一行是否存在
        const nextRow = $currentInput.closest('tr').next();
        if (!nextRow.length) {
            addFilterOptionRow();
        }
    }
});

核心优化点 #

• ID规范：用类选择器替代重复ID，避免DOM选择冲突
• 自动触发：通过input事件监听输入内容，仅在最后一行输入框有内容时自动添加新行
• 自动聚焦：新行创建后立即聚焦到对应输入框
• 防重复：添加前检查下一行是否存在，避免多次触发添加操作

内容的提问来源于stack exchange，提问作者Anaswara