使用箭头键导航多步表单？答案

【问题标题】：Navigating a multi-step form using arrow keys?使用箭头键导航多步表单？
【发布时间】：2015-07-16 19:00:10
【问题描述】：

我有一个 5 面板多步骤表单，它使用 div 'previous' 和 'next' 进行导航。我想让它按左箭头键作为单击上一个按钮，但按右箭头键将作为按右键。

我有这个工作..有点。

我已经正确地绑定（编辑）了我的箭头键，但由于它脱离了类名，它想要通过它们中的每一个来切换。有没有办法让它只激活当前显示的<fieldset> 上的那个？

<input type="button" name="previous" class="previous action-button" value="Previous" />

//binds left/right for navigation
$(window).bind('keydown', function(e){

    if (e.keyCode==37) {
        $(".previous").trigger("click");
    } else if (e.keyCode==39) {
        $(".next").trigger("click");
    };
});

【问题讨论】：

您是否尝试过查找哪个字段（以及哪个字段集）具有焦点？
给字段集 id 并使用，$("#id input.previous") 或 $("fieldset input.previous")
我该怎么做？我会用$("fieldset").is(":focus") 检查它还是每个人都需要一个类名？

标签： javascript jquery css key-bindings

【解决方案1】：

因为一切都已经开始了。我建议
为您特别感兴趣的元素设置不同的类名，并仅触发点击它们
以便它只标记那些。

祝你好运。

（如果它满足您的需要，请将其标记为答案）

【讨论】：

我已经想过这样做，但必须有一种比这更优雅的方法。
如果你这样做，在你的 CSS 中这样做很优雅： .classname1, .classname2 {...}