要将文本字段的光标从活动文本字段移动到新附加的文本字段，仅当活动文本字段已填充时，才从键盘按下回车键

To move cursor of textfield from active one to newly appended textfield on enter key pressed from keyboard only if active textfield is filled

本文关键字：字段 文本 活动 键盘 回车 填充 移动 新附加 光标      更新时间：2023-09-26

html

<table>
<thead>
<th>item</th>
<th>Cost</th>
</thead>
 <tbody id="tbody">
<tr>
    <td>Item 1</td>
    <td>
        <input type="text" class="elm" />
    </td>
</tr>

</tbody>
<tfoot>
<tr>
    <td>Total</td>
    <td>
        <label id="total">0</label>
    </td>
</tr>
</tfoot>

jquery

$('body').on('keyup','.elm',function(e){
//Check Key Press is Enter
if (e.keyCode != 13) {
    var sum = 0;
    $('.elm').each(function() {
        if($(this).val() != '' && !isNaN($(this).val())){
            sum += parseInt($(this).val());
        }
    });
    $('#total').text(sum);
}
else{
var $itemNum = $('#tbody tr');
if($itemNum.find('input').val().length > 0) 
{
    var itemNum = $('#tbody tr').length + 1;
    var newRow = '<tr>'+
        '<td>Item'+itemNum+'</td>'+
        '<td>'+
            '<input type="text" class="elm">'+
        '</td>'+
    '</tr>';
    $('#tbody').append(newRow);
}
}
});

我正在使用上面的代码在用户输入时动态添加数字值，通过在键盘中按 Enter 键附加新的文本字段，而不管用户输入的输入数量如何并自动计算其输出。通过按Enter键，我应该仅在用户在以前的文本字段中输入值后附加新的文本字段，并且光标应自动移动到新的文本字段。但是在我的代码中，它只发生在第一个文本字段，而对其他文本字段不同，请帮助我编码我是 JavaScript 的新手。

http://jsfiddle.net/72ene5ob/

嘿，看起来您只想检查最后一个输入字段的长度。 因此，只需将.last()添加到您的选择器中：var $itemNum = $（'#tbody tr'）.last（）;

$('body').on('keyup','.elm',function(e){
//Check Key Press is Enter
    console.log(e.keyCode);
if (e.keyCode != 13) {
    console.log('Enter detected');
    var sum = 0;
    $('.elm').each(function() {
        if($(this).val() != '' && !isNaN($(this).val())){
            sum += parseInt($(this).val());
        }
    });
    $('#total').text(sum);
}
else{
var $itemNum = $('#tbody tr').last();
if($itemNum.find('input').val().length > 0) 
{
    console.log('should add new input');
    var itemNum = $('#tbody tr').length + 1;
    var newRow = '<tr>'+
        '<td>Item'+itemNum+'</td>'+
        '<td>'+
            '<input type="text" class="elm">'+
        '</td>'+
    '</tr>';
    $('#tbody').append(newRow);
}
}
});

我扩展了David Karlsson的答案，在else块中添加了以下代码行作为最后一行：

     $('#tbody tr:last-child td:last-child input').focus();

之后，新添加的行的输入获得焦点。

小提琴

相关文章：