我正在寻找一种创建表单的方法，按Enter键可使焦点移至页面上的“下一个”表单元素。我一直在网上找到的解决方案是...
<body onkeydown="if(event.keyCode==13){event.keyCode=9; return event.keyCode}">
不幸的是，这似乎仅在IE中有效。因此，这个问题的实质是，是否有人知道适用于FF和Chrome的解决方案？另外，我宁愿不必将onkeydown事件添加到表单元素本身，但是如果那是唯一的方法，则必须这样做。
这个问题与问题905222相似，但在我看来，这是一个自己的问题。
编辑：另外，我已经看到人们提出了这样的问题，即这不是好样式，因为它与用户习惯的表单行为不同。我同意！这是客户的要求:(
Answers:
我使用了安德鲁建议的非常有效的逻辑。这是我的版本：
$('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/zh-CN/docs/Web/API/KeyboardEvent/keyCode
readonly和忽略字段disabled：filter(':visible:not([readonly]):enabled')
我想到的最简单的香草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
我用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()。
这对我有用：
$(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();
}
});
谢谢你的好脚本。
我刚刚在上面的函数上添加了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"。参见developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode
这里给出的所有实现都有问题。有些不能在textareas和提交按钮上正常使用，大多数不允许您使用shift向后移动，如果有的话，它们都不使用tabindexes，并且它们都不是从最后到第一个或第一个到最后。
要使[enter]键的作用类似于[tab]键，但仍可正确使用文本区域和提交按钮，请使用以下代码。另外，此代码允许您使用Shift键向后移动，并且制表符从前到后和从前到后环绕。
源代码：https : //github.com/mikbe/SaneEnterKey
mbsd_sane_enter_key = ->
input_types = "input, select, button, textarea"
$("body").on "keydown", input_types, (e) ->
enter_key = 13
tab_key = 9
if e.keyCode in [tab_key, enter_key]
self = $(this)
# some controls should just press enter when pressing enter
if e.keyCode == enter_key and (self.prop('type') in ["submit", "textarea"])
return true
form = self.parents('form:eq(0)')
# Sort by tab indexes if they exist
tab_index = parseInt(self.attr('tabindex'))
if tab_index
input_array = form.find("[tabindex]").filter(':visible').sort((a,b) ->
parseInt($(a).attr('tabindex')) - parseInt($(b).attr('tabindex'))
)
else
input_array = form.find(input_types).filter(':visible')
# reverse the direction if using shift
move_direction = if e.shiftKey then -1 else 1
new_index = input_array.index(this) + move_direction
# wrap around the controls
if new_index == input_array.length
new_index = 0
else if new_index == -1
new_index = input_array.length - 1
move_to = input_array.eq(new_index)
move_to.focus()
move_to.select()
false
$(window).on 'ready page:load', ->
mbsd_sane_enter_key()
var mbsd_sane_enter_key = function() {
var input_types;
input_types = "input, select, button, textarea";
return $("body").on("keydown", input_types, function(e) {
var enter_key, form, input_array, move_direction, move_to, new_index, self, tab_index, tab_key;
enter_key = 13;
tab_key = 9;
if (e.keyCode === tab_key || e.keyCode === enter_key) {
self = $(this);
// some controls should react as designed when pressing enter
if (e.keyCode === enter_key && (self.prop('type') === "submit" || self.prop('type') === "textarea")) {
return true;
}
form = self.parents('form:eq(0)');
// Sort by tab indexes if they exist
tab_index = parseInt(self.attr('tabindex'));
if (tab_index) {
input_array = form.find("[tabindex]").filter(':visible').sort(function(a, b) {
return parseInt($(a).attr('tabindex')) - parseInt($(b).attr('tabindex'));
});
} else {
input_array = form.find(input_types).filter(':visible');
}
// reverse the direction if using shift
move_direction = e.shiftKey ? -1 : 1;
new_index = input_array.index(this) + move_direction;
// wrap around the controls
if (new_index === input_array.length) {
new_index = 0;
} else if (new_index === -1) {
new_index = input_array.length - 1;
}
move_to = input_array.eq(new_index);
move_to.focus();
move_to.select();
return false;
}
});
};
$(window).on('ready page:load', function() {
mbsd_sane_enter_key();
}
与本机实现的默认行为相比，更改此行为实际上可以创建更好的用户体验。考虑到回车键的行为从用户的角度来看已经不一致，因为在单行输入中，回车倾向于提交表单，而在多行文本区域中，它只是向换行符的内容添加换行符。领域。
我最近做到了这一点（使用jQuery）：
$('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;
}
});
这不是非常有效，但是效果很好并且可靠-只需将“ enterastab”类添加到应以这种方式运行的任何输入元素即可。
我将OPs解决方案重新设计为Knockout绑定，并认为我会分享它。非常感谢 ：-）
这是小提琴
<!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指令添加到元素上，可以在我正在使用的应用程序中使用它。我正在使用条形码扫描仪在字段中输入数据，扫描仪的默认功能是模拟keayboard，在键入扫描的条形码的数据后注入Enter键。
该代码有一个副作用（对于我的用例而言，是一个积极的方面），如果将焦点移到按钮上，则enter keyup事件将导致激活按钮的动作。这对我的流程非常有效，因为标记中的最后一个表单元素是一个按钮，一旦通过扫描条形码“标签”了所有字段，便要激活该按钮。
<!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>
我遇到了类似的问题，我想+在数字键盘上按一下以跳到下一个字段。现在，我发布了一个库，认为对您有帮助。
PlusAsTab：一个jQuery插件，用于将numpad加号用作Tab键。
由于需要enter/↵代替，因此可以设置选项。找出要与jQuery event。哪个演示一起使用的键。
JoelPurra.PlusAsTab.setOptions({
// Use enter instead of plus
// Number 13 found through demo at
// https://api.jquery.com/event.which/
key: 13
});
// Matches all inputs with name "a[]" (needs some character escaping)
$('input[name=a\\[\\]]').plusAsTab();
您可以在PlusAsTab输入为标签演示中自己尝试一下。
data-plus-as-tab="true"，则无需执行任何操作，否则可以运行$("#new-input").plusAsTab()。在此“改进HTML表单演示中的用户体验”中，查看动态元素和示例实现。
我只有JavaScript才能运作。Firefox不允许您更新keyCode，因此您所能做的就是捕获keyCode 13，并通过tabIndex强制其将焦点放在下一个元素上，就像按下keyCode 9一样。棘手的部分是找到下一个tabIndex。我仅在IE8-IE10和Firefox上对此进行了测试，并且可以正常工作：
function ModifyEnterKeyPressAsTab(event)
{
var caller;
var key;
if (window.event)
{
caller = window.event.srcElement; //Get the event caller in IE.
key = window.event.keyCode; //Get the keycode in IE.
}
else
{
caller = event.target; //Get the event caller in Firefox.
key = event.which; //Get the keycode in Firefox.
}
if (key == 13) //Enter key was pressed.
{
cTab = caller.tabIndex; //caller tabIndex.
maxTab = 0; //highest tabIndex (start at 0 to change)
minTab = cTab; //lowest tabIndex (this may change, but start at caller)
allById = document.getElementsByTagName("input"); //Get input elements.
allByIndex = []; //Storage for elements by index.
c = 0; //index of the caller in allByIndex (start at 0 to change)
i = 0; //generic indexer for allByIndex;
for (id in allById) //Loop through all the input elements by id.
{
allByIndex[i] = allById[id]; //Set allByIndex.
tab = allByIndex[i].tabIndex;
if (caller == allByIndex[i])
c = i; //Get the index of the caller.
if (tab > maxTab)
maxTab = tab; //Get the highest tabIndex on the page.
if (tab < minTab && tab >= 0)
minTab = tab; //Get the lowest positive tabIndex on the page.
i++;
}
//Loop through tab indexes from caller to highest.
for (tab = cTab; tab <= maxTab; tab++)
{
//Look for this tabIndex from the caller to the end of page.
for (i = c + 1; i < allByIndex.length; i++)
{
if (allByIndex[i].tabIndex == tab)
{
allByIndex[i].focus(); //Move to that element and stop.
return;
}
}
//Look for the next tabIndex from the start of page to the caller.
for (i = 0; i < c; i++)
{
if (allByIndex[i].tabIndex == tab + 1)
{
allByIndex[i].focus(); //Move to that element and stop.
return;
}
}
//Continue searching from the caller for the next tabIndex.
}
//The caller was the last element with the highest tabIndex,
//so find the first element with the lowest tabIndex.
for (i = 0; i < allByIndex.length; i++)
{
if (allByIndex[i].tabIndex == minTab)
{
allByIndex[i].focus(); //Move to that element and stop.
return;
}
}
}
}
要使用此代码，请将其添加到您的html输入标签中：
<input id="SomeID" onkeydown="ModifyEnterKeyPressAsTab(event);" ... >
或将其添加到javascript中的元素中：
document.getElementById("SomeID").onKeyDown = ModifyEnterKeyPressAsTab;
其他一些注意事项：
我只需要它对我的输入元素起作用，但是如果需要，您可以将其扩展到其他文档元素。为此，getElementsByClassName很有帮助，但这是另一个主题。
一个限制是它只能在您添加到allById数组中的元素之间进行制表。它不会浏览浏览器可能会显示的其他内容，例如html文档外部的工具栏和菜单。也许这是功能而非限制。如果愿意，可以捕获keyCode 9，此行为也可以与Tab键一起使用。
您可以在下面使用经过Mozilla，IE和Chrome测试的我的代码
// Use to act like tab using enter key
$.fn.enterkeytab=function(){
$(this).on('keydown', 'input, select,', function(e) {
var self = $(this)
, form = self.parents('form:eq(0)')
, focusable
, next
;
if (e.keyCode == 13) {
focusable = form.find('input,a,select,button').filter(':visible');
next = focusable.eq(focusable.index(this)+1);
if (next.length) {
next.focus();
} else {
alert("wd");
//form.submit();
}
return false;
}
});
}
如何使用？
$（“＃form”）。enterkeytab（）; //输入密钥标签
如果可以的话，我将重新考虑这样做：<Enter>在表单中按下时的默认操作会提交表单，而您为更改此默认操作/预期行为所做的任何操作都可能会导致网站的可用性问题。
支持Shift + Enter的Vanilla js，并能够选择可聚焦的HTML标签。应该可以使用IE9 +。
onKeyUp(e) {
switch (e.keyCode) {
case 13: //Enter
var focusableElements = document.querySelectorAll('input, button')
var index = Array.prototype.indexOf.call(focusableElements, document.activeElement)
if(e.shiftKey)
focus(focusableElements, index - 1)
else
focus(focusableElements, index + 1)
e.preventDefault()
break;
}
function focus(elements, index) {
if(elements[index])
elements[index].focus()
}
}
尝试这个...
$(document).ready(function () {
$.fn.enterkeytab = function () {
$(this).on('keydown', 'input,select,text,button', function (e) {
var self = $(this)
, form = self.parents('form:eq(0)')
, focusable
, next
;
if (e.keyCode == 13) {
focusable = form.find('input,a,select').filter(':visible');
next = focusable.eq(focusable.index(this) + 1);
if (next.length) {
//if disable try get next 10 fields
if (next.is(":disabled")){
for(i=2;i<10;i++){
next = focusable.eq(focusable.index(this) + i);
if (!next.is(":disabled"))
break;
}
}
next.focus();
}
return false;
}
});
}
$("form").enterkeytab();
});
这是我想出的。
form.addEventListener("submit", (e) => { //On Submit
let key = e.charCode || e.keyCode || 0 //get the key code
if (key = 13) { //If enter key
e.preventDefault()
const inputs = Array.from(document.querySelectorAll("form input")) //Get array of inputs
let nextInput = inputs[inputs.indexOf(document.activeElement) + 1] //get index of input after the current input
nextInput.focus() //focus new input
}
}
这里的许多答案，使用e.keyCode和e.which被弃用。
相反，您应该使用e.key === 'Enter'。
文档：https：//developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode
使用HTML：
<body onkeypress="if(event.key==='Enter' && event.target.form){focusNextElement(event); return false;}">
使用jQuery：
$(window).on('keypress', function (ev)
{
if (ev.key === "Enter" && ev.currentTarget.form) focusNextElement(ev)
}
而使用Vanilla JS：
document.addEventListener('keypress', function (ev) {
if (ev.key === "Enter" && ev.currentTarget.form) focusNextElement(ev);
});
您可以focusNextElement()从此处获取功能：https：
//stackoverflow.com/a/35173443/3356679
使用JavaScript的焦点功能解决此问题的最简单方法如下：
您可以在家里复制并尝试！
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="input1" type="text" onkeypress="pressEnter()" />
<input id="input2" type="text" onkeypress="pressEnter2()" />
<input id="input3" type="text"/>
<script type="text/javascript">
function pressEnter() {
// Key Code for ENTER = 13
if ((event.keyCode == 13)) {
document.getElementById("input2").focus({preventScroll:false});
}
}
function pressEnter2() {
if ((event.keyCode == 13)) {
document.getElementById("input3").focus({preventScroll:false});
}
}
</script>
</body>
</html>
我有一个类似的需求。这是我所做的：
<script type="text/javascript" language="javascript">
function convertEnterToTab() {
if(event.keyCode==13) {
event.keyCode = 9;
}
}
document.onkeydown = convertEnterToTab;
</script>
在所有情况下，仅适用于Chrome和IE，我添加了以下代码来解决该问题：
var key =（window.event）？e.keyCode：e.which;
我在键码等于13时测试了键值
$('body').on('keydown', 'input, select, textarea', function (e) {
var self = $(this)
, form = self.parents('form:eq(0)')
, focusable
, next
;
var key = (window.event) ? e.keyCode : e.which;
if (key == 13) {
focusable = form.find('input,a,select,button,textarea').filter(':visible');
next = focusable.eq(focusable.index(this) + 1);
if (next.length) {
next.focus();
} else {
focusable.click();
}
return false;
}
});
$("#form input , select , textarea").keypress(function(e){
if(e.keyCode == 13){
var enter_position = $(this).index();
$("#form input , select , textarea").eq(enter_position+1).focus();
}
});
textarea从第一行的选择器中删除。在文本区域中，您希望能够使用Enter键开始新行。