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

Question

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);
}
}
});

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

的新手

Answer 1

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);
}
}
});

Answer 2

我通过添加以下代码行作为 else 块的最后一行来扩展 David Karlsson 的回答：

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

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

Fiddle

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

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

javascript

jquery

html

html

jquery