当按下回车键时，能告诉我如何将焦点转移到下一个字段吗？我使用dform插件（将JSON转换为表单）。
我用Google搜索，但这不起作用。为什么我的焦点不会转移到下一个领域？
$(document).keypress(function(e) {
if(e.which == 13) {
// Do something here if the popup is open
alert("dd")
var index = $('.ui-dform-text').index(this) + 1;
$('.ui-dform-text').eq(index).focus();
}
});
*注意（来自评论）：它还需要处理未设置tabindex值的网页
答案 0 :(得分：29)
它失败，因为this是代码中的document。
您想要使用当前焦点项目的索引（document.activeElement），或者如果您使用委派事件，则可以确保this是当前项目。
无论是否tabindexes，此最终版本都有效。它也包裹着：
他们都使用我添加的自定义jQuery选择器:focusable来选择所有可聚焦元素（包括链接）：
// register jQuery extension
jQuery.extend(jQuery.expr[':'], {
focusable: function (el, index, selector) {
return $(el).is('a, button, :input, [tabindex]');
}
});
$(document).on('keypress', 'input,select', function (e) {
if (e.which == 13) {
e.preventDefault();
// Get all focusable elements on the page
var $canfocus = $(':focusable');
var index = $canfocus.index(this) + 1;
if (index >= $canfocus.length) index = 0;
$canfocus.eq(index).focus();
}
});
如果您愿意，可以在事件处理程序中使用相同的自定义选择器。然后它甚至可以在锚链接上工作（如果你将事件更改为keydown而不是keypress ）：
$(document).on('keydown', ':focusable', function (e) {
这也使用委派的on，在keydown上监听document事件。 然后应用jQuery选择器，然后将该函数应用于导致该事件的任何匹配元素。这样效率更高，因为它只在事件时应用选择器（而不是将多个事件处理程序应用于每个DOM匹配元素）。
$(document).keypress(function(e) {
if(e.which == 13) {
// Do something here if the popup is open
//alert("dd")
var index = $('.ui-dform-text').index(document.activeElement) + 1;
$('.ui-dform-text').eq(index).focus();
}
});
*注意：警报可能会干扰focus，因此请使用console.log作为输出，并在大多数浏览器的调试窗口中查看（例如Chrome的F12调试工具）。 < / p>
这一个包装回到最后一个项目并且也适用于选择（默认行为被阻止，因此您只能使用空格来打开或向上/向下来选择选项。
$('input,select').on('keypress', function (e) {
if (e.which == 13) {
e.preventDefault();
var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
console.log($next.length);
if (!$next.length) {
$next = $('[tabIndex=1]');
}
$next.focus();
}
});
$(document).on('keypress', 'input,select', function (e) {
if (e.which == 13) {
e.preventDefault();
var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
console.log($next.length);
if (!$next.length) {
$next = $('[tabIndex=1]');
}
$next.focus();
}
});
答案 1 :(得分：3)
我创建了一个非jQuery版本。所以只有纯Javascript; https://jsfiddle.net/mm0uctuv/2/
使用Javascript：
var inputs = document.querySelectorAll("input,select");
for (var i = 0 ; i < inputs.length; i++) {
inputs[i].addEventListener("keypress", function(e){
if (e.which == 13) {
e.preventDefault();
var nextInput = document.querySelectorAll('[tabIndex="' + (this.tabIndex + 1) + '"]');
if (nextInput.length === 0) {
nextInput = document.querySelectorAll('[tabIndex="1"]');
}
nextInput[0].focus();
}
})
}
HTML：
<form>
Field 1: <input type="text" tabindex="1"><br>
Field 3: <input type="text" tabindex="3"><br>
Field 2: <input type="text" tabindex="2">
</form>
答案 2 :(得分：2)
以下代码应该这样做;它使用tabIndex属性。如果这是不可接受的，请告诉我们：
$(function() {
$('input').on('keypress', function(e) {
e.which !== 13 || $('[tabIndex=' + (+this.tabIndex + 1) + ']')[0].focus();
});
});
下拉已经输入了打开下拉列表的键。
为了能够在移动到下一个表单元素之前执行某些操作，您可以使用以下版本：
$(function() {
$(document).on('keypress', function(e) {
var that = document.activeElement;
if( e.which == 13 ) {
e.preventDefault();
alert( "dd" );
$('[tabIndex=' + (+that.tabIndex + 1) + ']')[0].focus();
}
});
});
答案 3 :(得分：2)
在顶级div，添加onKeyDown={this.onKeyDown.bind(this)}并将以下方法（ES6）添加到与div相同的类中：
onKeyDown(event) {
if (event.keyCode === 13) {
event.preventDefault()
const inputs =
Array.prototype.slice.call(document.querySelectorAll("input"))
const index =
(inputs.indexOf(document.activeElement) + 1) % inputs.length
const input = inputs[index]
input.focus()
input.select()
}
}
答案 4 :(得分：0)
尝试从我的小提琴中修改的以下JavaScript代码。 select元素的默认行为是在按键上展开。 + $（this）.attr（“tabindex”）
开头的加号将text属性值转换为int。
$(".ui-dform-text").keypress(function(e) {
if(e.which == 13) {
// Do something here if the popup is open
alert($(this).attr("tabindex"));
var index = +$(this).attr("tabindex") + 1;
$("[tabindex='" + index +"']").focus();
}
});
答案 5 :(得分：0)
这主要是个玩笑，但这是使用最新API的Vanilla JS版本，只要您使用的是现代浏览器，它就应该是防弹的
这是正在发生的事情：
就像那样，您有一些真正不可读的代码，主要是括号和箭头功能：）
fdValue.value答案 6 :(得分：0)
它看起来一样，但是我提供了一些简单，也许有用并且易于记忆的东西，这就是我所使用的
html
<input placeholder="nama">
<input placeholder="email">
<input placeholder="password">
<button>MASUK<button>
js
$('INPUT').keydown( e => e.which === 13?$(e.target).next().focus():"");
答案 7 :(得分：0)
// This will work; add this code in your on ready function and define your parent element which includes child elements to be focused.
const mainDiv = document.getElementById(`auto-focuser`); //here your parent element you need to focus
const keyDownEvent = (event) => {
if (event.key === "Enter") {
if (event.target.tagName === "TEXTAREA" && (event.target.innerHTML !== "" && event.target.innerHTML.substr(-1) !== "\n"))
return;
if (event.target.attributes.tabindex) {
const nextElm = mainDiv.querySelectorAll(`[tabindex='${parseInt(event.target.attributes.tabindex.value) + 1}']`).item(0)
if (nextElm) {
nextElm.focus()
if (nextElm.tagName === "INPUT" || nextElm.tagName === "TEXTAREA") {
nextElm.select()
nextElm.selectionStart = nextElm.selectionEnd = nextElm.value.length;
}
event.preventDefault()
}
}
}
}
mainDiv?.addEventListener('keydown', keyDownEvent);