按Enter键的行为类似于Javascript中的Tab
按Enter键的行为类似于Javascript中的Tab
提问于 2009-06-17 22:21:39
我希望创建一个表单，在该表单中，按enter键可以使焦点转到页面上的“下一个”表单元素。我一直在网上找到的解决方案是...
<body onkeydown="if(event.keyCode==13){event.keyCode=9; return event.keyCode}">不幸的是，这似乎只在IE中有效。因此，这个问题的关键是，有没有人知道一个适用于FF和Chrome的解决方案？此外，我不希望将onkeydown事件添加到表单元素本身，但如果这是唯一的方法，它将不得不这样做。
这个问题类似于question 905222，但在我看来，它应该有自己的问题。
编辑:此外，我还看到人们提出这样的问题，即这不是一个好的风格，因为它与用户习惯的表单行为不同。我同意!这是一个客户端请求:(
回答 18
Stack Overflow用户
回答已采纳
发布于 2012-08-26 21:24:36
我使用了Andrew建议的逻辑，这是非常有效的。这是我的版本：
$('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;
}
});https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode事件的键码(即：e.keycode)折旧通知:- keycode
Stack Overflow用户
发布于 2016-12-30 16:20:01
我想出的最简单的普通JS代码片段：
document.addEventListener('keydown', function (event) {
if (event.keyCode === 13 && event.target.nodeName === 'INPUT') {
var form = event.target.form;
var index = Array.prototype.indexOf.call(form, event.target);
form.elements[index + 1].focus();
event.preventDefault();
}
});适用于IE 9+和现代浏览器。
Stack Overflow用户
发布于 2013-11-20 22:50:19
谢谢你写的好剧本。
我刚刚在上面的函数中添加了shift事件，以便在元素之间返回，我想可能有人需要这个。
$('body').on('keydown', 'input, select, textarea', function(e) {
var self = $(this)
, form = self.parents('form:eq(0)')
, focusable
, next
, prev
;
if (e.shiftKey) {
if (e.keyCode == 13) {
focusable = form.find('input,a,select,button,textarea').filter(':visible');
prev = focusable.eq(focusable.index(this)-1);
if (prev.length) {
prev.focus();
} else {
form.submit();
}
}
}
else
if (e.keyCode == 13) {
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;
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1009808
复制相关文章
相似问题