我想创建一个表单，按下回车键会将焦点转移到页面上的“下一个”表单元素。我在网上找到的解决方案是...
<body onkeydown="if(event.keyCode==13){event.keyCode=9; return event.keyCode}">
很遗憾，这种方法似乎只在IE中有效。因此，这个问题的关键是是否有人知道适用于FF和Chrome的解决方案？此外，我不想将 onkeydown 事件添加到表单元素本身，但如果这是唯一的方法，那就只能这样做。
这个问题类似于问题 905222，但我认为它值得拥有自己的问题。
编辑：此外，我看到有人提出这不是很好的风格问题，因为它偏离了用户习惯的表单行为。我同意！这是客户的要求:(
我使用了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;
}
});
KeyboardEvent的键码（即e.keycode）已经废弃通知：- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
我想到的最简单的原生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+和现代浏览器。
Uncaught TypeError: Array.prototype.indexOf called on null or undefined。 - Justin我已经用 jQuery 重写了 Andre Van Zuydam 的答案，因为他的答案对我不起作用。这个代码会捕获到 Enter 和 Shift+Enter 两种情况。按下 Enter 后会向前跳格，Shift+Enter 则会向后跳格。
我还重新编写了初始化当前焦点项中的 self 的方式，并以此选择表单。以下是代码：
// Map [Enter] key to work like the [Tab] key
// Daniel P. Clark 2014
// Catch the keydown for the entire document
$(document).keydown(function(e) {
// Set self as the current item in focus
var self = $(':focus'),
// Set the form by the current item in focus
form = self.parents('form:eq(0)'),
focusable;
// Array of Indexable/Tab-able items
focusable = form.find('input,a,select,button,textarea,div[contenteditable=true]').filter(':visible');
function enterKey(){
if (e.which === 13 && !self.is('textarea,div[contenteditable=true]')) { // [Enter] key
// If not a regular hyperlink/button/textarea
if ($.inArray(self, focusable) && (!self.is('a,button'))){
// Then prevent the default [Enter] key behaviour from submitting the form
e.preventDefault();
} // Otherwise follow the link/button as by design, or put new line in textarea
// Focus on the next item (either previous or next depending on shift)
focusable.eq(focusable.index(self) + (e.shiftKey ? -1 : 1)).focus();
return false;
}
}
// We need to capture the [Shift] key and check the [Enter] key either way.
if (e.shiftKey) { enterKey() } else { enterKey() }
});
textarea是因为我们 "需要" 在其中进行制表。此外，一旦进入，我们不希望停止 Enter 的默认行为放入新行。
a 和 button允许默认操作，"并且" 仍然聚焦于下一个项目，是因为它们不总是加载另一个页面。 它们可以有触发器/效果，例如手风琴或选项卡内容。 因此，一旦触发默认行为，并且页面执行其特殊效果，您仍然希望转到下一个项目，因为您的触发器可能已经引入了它。
if (e.shiftKey) { enterKey() } else { enterKey() } 的目的是什么？看起来应该只需要写成 enterKey() 就行了。 - AVProgrammer感谢您提供优秀的脚本。
我刚刚在上述函数中添加了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;
}
});
e.keyCode和e.which已被弃用。您应该使用e.key === "Enter"。请参见https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode。 - oriadam这个方法对我有用：
$(document).on('keydown', ':tabbable', function(e) {
if (e.key === "Enter") {
e.preventDefault();
var $canfocus = $(':tabbable:visible');
var index = $canfocus.index(document.activeElement) + 1;
if (index >= $canfocus.length) index = 0;
$canfocus.eq(index).focus();
}
});
$('input.enterastab, select.enterastab, textarea.enterastab').live('keydown', function(e) {
if (e.keyCode==13) {
var focusable = $('input,a,select,button,textarea').filter(':visible');
focusable.eq(focusable.index(this)+1).focus();
return false;
}
});
这里有一个Fiddle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js" type="text/javascript"></script>
</head>
<body>
<div data-bind="nextFieldOnEnter:true">
<input type="text" />
<input type="text" />
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="text" />
<input type="text" />
</div>
<script type="text/javascript">
ko.bindingHandlers.nextFieldOnEnter = {
init: function(element, valueAccessor, allBindingsAccessor) {
$(element).on('keydown', 'input, select', function (e) {
var self = $(this)
, form = $(element)
, focusable
, next
;
if (e.keyCode == 13) {
focusable = form.find('input,a,select,button,textarea').filter(':visible');
var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
next = focusable.eq(nextIndex);
next.focus();
return false;
}
});
}
};
ko.applyBindings({});
</script>
</body>
</html>
这里是一个angular.js指令，它可以使enter键转到下一个字段，其他答案的启发。这里有一些看起来可能有点奇怪的代码，因为我只使用了angular中打包的jQlite。我相信这里大部分功能在所有浏览器> IE8都能正常工作。
angular.module('myapp', [])
.directive('pdkNextInputOnEnter', function() {
var includeTags = ['INPUT', 'SELECT'];
function link(scope, element, attrs) {
element.on('keydown', function (e) {
// Go to next form element on enter and only for included tags
if (e.keyCode == 13 && includeTags.indexOf(e.target.tagName) != -1) {
// Find all form elements that can receive focus
var focusable = element[0].querySelectorAll('input,select,button,textarea');
// Get the index of the currently focused element
var currentIndex = Array.prototype.indexOf.call(focusable, e.target)
// Find the next items in the list
var nextIndex = currentIndex == focusable.length - 1 ? 0 : currentIndex + 1;
// Focus the next element
if(nextIndex >= 0 && nextIndex < focusable.length)
focusable[nextIndex].focus();
return false;
}
});
}
return {
restrict: 'A',
link: link
};
});
pdk-next-input-on-enter指令即可。我正在使用条形码扫描器将数据输入到字段中，扫描器的默认功能是模拟键盘，在键入扫描条形码的数据后注入回车键。<!DOCTYPE html>
<html ng-app=myapp>
<head>
<script src="angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="LabelPrintingController">
<div class='.container' pdk-next-input-on-enter>
<select ng-options="p for p in partNumbers" ng-model="selectedPart" ng-change="selectedPartChanged()"></select>
<h2>{{labelDocument.SerialNumber}}</h2>
<div ng-show="labelDocument.ComponentSerials">
<b>Component Serials</b>
<ul>
<li ng-repeat="serial in labelDocument.ComponentSerials">
{{serial.name}}<br/>
<input type="text" ng-model="serial.value" />
</li>
</ul>
</div>
<button ng-click="printLabel()">Print</button>
</div>
</body>
</html>
function return2tab (div)
{
document.addEventListener('keydown', function (ev) {
if (ev.key === "Enter" && ev.target.nodeName === 'INPUT') {
var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
let ol= div.querySelectorAll(focusableElementsString);
for (let i=0; i<ol.length; i++) {
if (ol[i] === ev.target) {
let o= i<ol.length-1? ol[i+1]: o[0];
o.focus(); break;
}
}
ev.preventDefault();
}
});
}
<Enter> 键的默认操作是提交表单，而任何更改此默认操作/预期行为的操作都可能导致网站的可用性问题。
textarea。在文本域中，您可以使用回车键开始新一行。 - aimfeldfilter(':visible:not([readonly]):enabled')。 - SnakeDrak