jQuery 按下回车键，专注于表格内的下一个输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21240316/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Focus on next input field inside table with enter key press
提问by geomo
I need to move in to the next input field inside a table with many rows using enter key press. I try this :
我需要使用回车键移入具有多行的表中的下一个输入字段。我试试这个：
$(function() {
$('input').keyup(function (e) {
if (e.which == 13) {
$(this).find().next('input').focus();
}
});
});
Why dont work ? :(
为什么不工作？:(
HTML
HTML
<table class="half">
<tr>
<td>Nome :</td>
<td><input name="ragsoc" type="text" id="ragsoc" value=""/></td>
<td>Mnemo:</td>
<td><input name="mnemo" type="text" id="mnemo" value=""/></td>
<td>Partita IVA :</td>
<td><input name="piva" type="text" id="piva" value=""/></td>
</tr>
<tr>
<td>Nome :</td>
<td><input name="ragsoc" type="text" id="ragsoc" value=""/></td>
<td>Mnemo:</td>
<td><input name="mnemo" type="text" id="mnemo" value=""/></td>
<td>Partita IVA :</td>
<td><input name="piva" type="text" id="piva" value=""/></td>
</tr>
</table>
This code work fine but only in the first row of table :
此代码工作正常，但仅在 table 的第一行中：
$('input').keydown(function (e) {
if (e.which === 13) {
$(this).closest('td').nextAll().eq(1).find('input').focus()
}
});
What is wrong or missing ?
有什么问题或遗漏了什么？
回答by Satpal
Assuming .inputsis a sibling of your current element. .find()searches in descendants of current element(this)
假设.inputs是当前元素的兄弟。.find()在当前元素的后代中搜索(this)
$('.inputs').keydown(function (e) {
if (e.which === 13) {
$(this).next('.inputs').focus();
}
});
You need to use .closest(), .nextAll()
你需要使用.closest(), .nextAll()
$('.inputs').keydown(function (e) {
if (e.which === 13) {
$(this).closest('td').nextAll().eq(1).find('.inputs').focus();
//OR
//$(this).closest('td').next().next().find('.inputs').focus()
}
});
As OP has updated question. Use
由于 OP 更新了问题。用
$('.inputs').keydown(function (e) {
if (e.which === 13) {
var index = $('.inputs').index(this) + 1;
$('.inputs').eq(index).focus();
}
});
DEMO, As note I have used class="inputs"
DEMO，作为我使用过的说明class="inputs"
回答by Afzaal Ahmad Zeeshan
Maybe it didn't work, because you are not using any parameter for the find()method.
也许它不起作用，因为您没有为该find()方法使用任何参数。
And try this simly:
并简单地尝试这个：
$('#txt').keydown(function (e){
if(e.keyCode == 13){
$(this).next('.inputs').focus();
}
});
Or this:
或这个：
$('#txt').keydown(function (e){
if(e.keyCode == 13){
$(this).find('.inputs').focus();
}
});
These would work!
这些会起作用！
回答by Milind Anantwar
$('.inputs').keydown(function (e){
if(e.keyCode == 13){
$(this).next('.inputs').focus();
}
});
回答by CesarMiguel
It is:
这是：
if (event.which == 13) {
event.preventDefault();
var $this = $(event.target);
var index = parseFloat($this.attr('data-index'));
$('[data-index="' + (index + 1).toString() + '"]').focus();
}
Font:
字体：
回答by kontashi35
This worked for me in angular, I have added jQuery as well. You get the idea. It is same for all javascript.
这对我有用，我也添加了 jQuery。你明白了。所有 javascript 都是一样的。
I have table with dynamic row. field-focus class with each td input.
我有动态行的表。每个 td 输入的字段焦点类。
<tr>
<td>
<textarea name="labResultAlpha" cols="25" rows="1" class="field-focus" (keydown)="keyPressFunction($event)"></textarea>
</td>
</tr>
TypeScript/Javascript
METHOD 1
TypeScript/Javascript
方法 1
enterPressFunction(e) {
const focus = $(document.activeElement); //get your active elememt ie select input
let inputView;
if (e.which === 13) {
inputView = focus.closest('tbody').next().find(".field-focus"); // go to tbody and search for next class name .field-focus
}
inputView.show().focus(); //focus and show next input in table
}
If this didt work try second one.
METHOD 2
如果这不起作用，请尝试第二个。
方法二
keyPressFunction(e) {
const focus = $(document.activeElement); //get current element
if (e.which === 13) { //if entered is clicked
focus.closest('tr').next('tr').find('.field-focus').focus(); //get current row,go to next row of current row and find field-focus class, focus on input
}
}
