使用输入键关注表格内的下一个输入字段答案

【问题标题】：Focus on next input field inside table with enter key press使用输入键关注表格内的下一个输入字段
【发布时间】：2014-01-20 17:23:53
【问题描述】：

我需要使用 Enter 键移动到包含许多行的表中的下一个输入字段。我试试这个：

$(function() {

    $('input').keyup(function (e) {
       if (e.which == 13) {
       $(this).find().next('input').focus();
       }
     });

});

为什么不工作？ :(

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>

这段代码工作正常，但只在表格的第一行：

$('input').keydown(function (e) {
    if (e.which === 13) {
    $(this).closest('td').nextAll().eq(1).find('input').focus()
    }
 });

出了什么问题或遗漏了什么？

【问题讨论】：

我们需要查看您的 html。
试试$(this).nextAll('.inputs:first').focus()
没有看到 html，任何答案都是最好的猜测。

标签： jquery

【解决方案1】：

假设.inputs 是您当前元素的兄弟。 .find() 在当前元素的后代中搜索(this)

 $('.inputs').keydown(function (e) {
    if (e.which === 13) {
       $(this).next('.inputs').focus();
    }
 });

你需要使用.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()
    }
 });

DEMO

由于 OP 更新了问题。使用

 $('.inputs').keydown(function (e) {
     if (e.which === 13) {
         var index = $('.inputs').index(this) + 1;
         $('.inputs').eq(index).focus();
     }
 });

DEMO，请注意我使用了class="inputs"

【讨论】：

【解决方案2】：

也许它不起作用，因为您没有为 find() 方法使用任何参数。

然后简单地试试这个：

$('#txt').keydown(function (e){
   if(e.keyCode == 13){
     $(this).next('.inputs').focus();
   }
});

或者这个：

$('#txt').keydown(function (e){
   if(e.keyCode == 13){
     $(this).find('.inputs').focus();
   }
});

这些都行！

【讨论】：

【解决方案3】：

 $('.inputs').keydown(function (e){
   if(e.keyCode == 13){
     $(this).next('.inputs').focus();
 }
});

【讨论】：

为了清楚 $(this).next('.inputs') 不会找到下一个输入，它将获取下一个兄弟元素（无论它是什么）并仅在它具有类 inputs 时才返回它

【解决方案4】：

它是：

if (event.which == 13) {
    event.preventDefault();
    var $this = $(event.target);
    var index = parseFloat($this.attr('data-index'));
    $('[data-index="' + (index + 1).toString() + '"]').focus();
}

http://jsfiddle.net/hxZSU/1/

字体：

focusing on next input (jquery)

【讨论】：

【解决方案5】：

这对我有用，我也添加了 jQuery。你明白了。所有的javascript都是一样的。

我有动态行的表。每个 td 输入的字段焦点类。

<tr>
  <td>
<textarea name="labResultAlpha" cols="25" rows="1" class="field-focus" (keydown)="keyPressFunction($event)"></textarea>   
  </td>
</tr>

TypeScript/Javascript
方法一

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
  }

如果这不起作用，请尝试第二个。
方法二

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
    }

  }

【讨论】：