jQuery next表中的输入

cmssoen2  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(119)

我在一个表中有一系列输入和选择元素:

<table id='tbl-edit-company' class='tbl-form tbl-contact-form'>   
      <tbody>
        <tr>
          <td><label for='edit-company-company-name'>Company Name</label></td>
          <td><input id='edit-company-company-name' class='contact-input' name='edit-company-company-name' type='textbox' maxlength='50' value=''></td>
        </tr>  
        <tr>
          <td><label for='cmbo-edit-company-business-type'>Business Type</label></td>
          <td>
            <select id='cmbo-edit-company-business-type' class='contact-combo' name='cmbo-edit-company-business-type'>
            <option value='0'> - </option>
            <option value='1'>Construction</option>
            <option value='2'>Garage</option>
            <option value='3'>Financial</option>
            <select>
          </td>
        </tr>
        <tr>
          <td><label for='edit-company-branch-name'>Branch</label></td>
          <td><input id='edit-company-branch-name' class='contact-input' name='edit-company-branch-name' type='textbox' maxlength='20'><div id='found-branches'></div></td>
        </tr>     
        <tr>
          <td><label for='edit-company-phone'>Phone Number</label></td>
          <td><input id='edit-company-phone' class='phone-input' name='edit-company-phone' type='textbox' maxlength='20'></td>
        </tr>    
        <tr>
          <td><label for='edit-company-email'>Email</label></td>
          <td><input id='edit-company-email' class='email-input' name='edit-company-email' type='textbox' maxlength='50'></td>
        </tr>
      </tbody>
    </table>

字符串
我希望回车符的行为像一个制表符,移动到下一个字段。
我有:

$('#tbl-edit-company tbody').on('keydown', 'input, select',  function(e) {
      if (e.keyCode == 13) {
        event.preventDefault();
        $(this).next().focus();
      }  
    });


我知道节点结构对于$(this).next().focus()来说太复杂了;但是我需要parent(),next(),find()的什么组合才能使它工作呢?
我已经尝试了很多次不同的组合,之前只是问这里!!

332nm8kg

332nm8kg1#

解决这个问题的一种方法是向所有input/select字段添加公共类。然后,使用.index()获取被聚焦的类的索引,并使用:eq()聚焦具有相同类的下一个字段。

  • 演示代码 *:
$('#tbl-edit-company tbody').find('input,select').addClass('something'); //adding this class... to all input/select
$('#tbl-edit-company tbody').on('keydown', 'input, select', function(e) {
  var index_ = $('.something').index(this) //get index of class

  if (e.keyCode == 13) {
    $('#tbl-edit-company tbody').find(`.something:eq(${index_ + 1})`).focus(); //focus on next class + 1
  }
});

个字符

相关问题