Html 使用箭头键在表单中导航

Html 使用箭头键在表单中导航,html,forms,usability,Html,Forms,Usability,我有一个html表单,它像一个表一样创建(有行和列)。基本上它看起来像excel。 现在我想用箭头键导航,就像在excel中一样。可能吗 <table> <tr> <td/> <td/> </tr> <tr> <td/> <td/> </tr> </table> 是的,一旦我得到你的提示,这很容易。这

我有一个html表单,它像一个表一样创建(有行和列)。基本上它看起来像excel。 现在我想用箭头键导航,就像在excel中一样。可能吗

<table>
  <tr>
      <td/>
      <td/>
  </tr>      
  <tr>
      <td/>
      <td/>
  </tr>
</table>

是的,一旦我得到你的提示,这很容易。这是我的解决方案:

   var UP = 38;
    var DOWN = 40;
    var LEFT = 37;
    var RIGHT = 39;
    var TAB = 9;
    $('#tab-columns').on('keydown', 'input', function (event) {

        var $focused = $(':focus');
        var id = ($focused.parents("td").attr('id'));
        if (id.startsWith("field_")) {              
            idArr = id.replace("field_", "").split("_");
            row = Number(idArr[0]);
            col = Number(idArr[1]);

            newId = id;
            switch (event.which) {          
            case UP:
                newId = "field_"+(row-1)+"_"+col;
                break;
            case DOWN:
                newId = "field_"+(row+1)+"_"+col;
                break;
            case TAB:
            case RIGHT:
                newId = "field_"+row+"_"+(col+1);
                break;                  
            case LEFT:
                newId = "field_"+row+"_"+(col-1);
                break;
            default:
                // nothing
            }

            $("#"+newId).find("input").focus();
        }

您需要快速搜索:按键事件、按键代码和设置焦点。从那里开始应该相对简单。