使用箭头键浏览表单

Question

我有一个 html 表单，其创建方式类似于 table（包含行和列）。基本上它看起来像 excel。现在我想像在 excel 中一样使用箭头键进行导航。这可能吗？

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

Answer 1

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

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

使用箭头键浏览表单

Navigate through form with arrow keys

html

forms

usability