我希望创建一个表单,在该表单中,按enter键可以使焦点转到页面上的“下一个”表单元素。我一直在网上找到的解决方案是...
<body onkeydown="if(event.keyCode==13){event.keyCode=9; return event.keyCode}">
不幸的是,这似乎只在IE中有效。因此,这个问题的关键是,有没有人知道一个适用于FF和Chrome的解决方案?此外,我不希望将onkeydown事件添加到表单元素本身,但如果这是唯一的方法,它将不得不这样做。
这个问题类似于question 905222,但在我看来,它应该有自己的问题。
编辑:此外,我还看到人们提出这样的问题,即这不是一个好的风格,因为它与用户习惯的表单行为不同。我同意!这是一个客户端请求:(
发布于 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
发布于 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+和现代浏览器。
发布于 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;
}
});
https://stackoverflow.com/questions/1009808
复制相似问题