关于 javascript：仅当活动文本字段已填满时，才将文本字段的光标从活动的一个移动到新附加的文本字段上按下键盘上的输入键

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

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$('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 键附加新的文本字段，而不管用户输入的输入数量如何，并自动计算其输出。通过按 EnterKey ，我应该仅在用户在前一个文本字段中输入值后才附加新的文本字段，并且光标应该自动移动到新的文本字段。
但在我的代码中，它只发生在第一个文本字段中，其他文本字段不同，请帮助我编码我是 javascript 新手。

相关讨论

http://jsfiddle.net/72ene5ob/

嘿，您似乎只想检查最后一个输入字段的长度。所以只需将 .last() 添加到您的选择器中： var $itemNum = $(\\'#tbody tr\\').last();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

$('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);
}
}
});