当前位置：首页技术文章正文

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

01-05 技术文章 162

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 新手。

只需将 last() 添加到 $item num 行

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

这是不正确的，只是我在没有 .last() 的情况下运行这个 jsfiddle;它对我来说很好。我希望他需要在页面上包含 jquery 脚本文件。
谢谢先生，这就是我两天以来一直想做的事情，最后你帮我做到了。
请解释一下 setTimeout(function(){ $(\\’.elm\\’).last().focus();}, 0); 的需要是什么
@David Karlsson，如果我想重置为初始，即删除所有附加的文本字段，并且通过按键盘上的删除键只填充初始文本字段，我应该添加什么

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

1	$(‘#tbody tr:last-child td:last-child input’).focus();

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

小提琴

如果我想通过按键盘上的删除键重置到删除所有附加文本字段的初始位置，只有初始文本字段未填充，我应该添加什么
我想您需要检查键 46(删除)的 keyup 事件，然后使用以下选择器删除除第一行以外的所有内容： $(\\’#tbody tr:not(:first)\\’).remove();之后 $(\\’#tbody tr:first-child td:last-child input\\’).val(“);

来源：https://www.codenong.com/27732480/

微信公众号

手机浏览(小程序)

Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_10040.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

0

分享到：