javascript - Enter 按键的行为类似于 Javascript 中的 Tab

标签 javascript html cross-browser dom-events

我希望创建一个表单,在该表单中按下回车键会使焦点转到页面上的“下一个”表单元素。我一直在网上找到的解决方案是...

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

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

这个问题类似于question 905222 ,但在我看来值得自己提出问题。

编辑:另外,我看到有人提出这样的问题,即这不是好的风格,因为它与用户习惯的表单行为不同。我同意!这是一个客户请求:(

最佳答案

我使用了安德鲁建议的逻辑,非常有效。这是我的版本:

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

KeyboardEvent 的键码(即:e.keycode)折旧通知:- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

关于javascript - Enter 按键的行为类似于 Javascript 中的 Tab,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1009808/

相关文章:

Javascript:对象不支持 onclick ="status()"的此操作错误

html - Chrome 无法播放 .mp4 文件

testing - 浏览器兼容性测试

html - 我的下拉菜单在除 IE 之外的每个浏览器中都居中,我不知道为什么

javascript - Safari、Edge 和 IE 上的 mouseenter 和 mouseleave

javascript - 复选框以 .detach 和 .prepend 对象

javascript - 如何使用 ngAnimate 在 CSS 类之间制作动画?

javascript - react-select 可以加载异步数据

javascript - 有没有办法用 RequireJS 延迟设置资源的路径?

html - 在具有 contentEditable 的 HTML 文档中选择和操作只读部分