Enter键的行为类似于Javascript中的Tab

一尘不染

Enter键的行为类似于Javascript中的Tab

html

我正在寻找一种创建表单的方法，按Enter键可使焦点移至页面上的“下一个”表单元素。我一直在网上找到的解决方案是…

 <body onkeydown="if(event.keyCode==13){event.keyCode=9; return event.keyCode}">

不幸的是，这似乎仅在IE中有效。因此，这个问题的实质是，是否有人知道适用于FF和Chrome的解决方案？另外，我宁愿不必将 onkeydown
事件添加到表单元素本身，但是如果那是唯一的方法，则必须这样做。

编辑：另外，我已经看到人们提出了这样的问题，即这不是好样式，因为它与用户习惯的表单行为不同。我同意！这是客户的要求

阅读 356

2020-05-10

共1个答案

一尘不染

我使用了安德鲁提出的非常有效的逻辑。这是我的版本：

$('body').on('keydown', 'input, select', function(e) {
    if (e.key === "Enter") {
        var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
        focusable = form.find('input,a,select,button,textarea').filter(':visible');
        next = focusable.eq(focusable.index(this)+1);
        if (next.length) {
            next.focus();
        } else {
            form.submit();
        }
        return false;
    }
});

2020-05-10