按下输入时如何将焦点移动到下一个字段？ [英] How to move focus on next field when enter is pressed?
问题描述
当按下回车键时，能告诉我如何将焦点转移到下一个字段吗？我使用 dform 插件（将JSON转换为表单）。
Can you please tell me how to move focus on to the next field when the enter key is press? I use the dform plugin (which converts JSON to a form).
我用Google搜索，但这不起作用。为什么我的焦点不会转移到下一个字段？
I Googled it, but this not working. Why doesn't my focus move on to the next field?
$(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 值设置
*Note (from comments): It also needs to work on pages that do not have tabindex values set
推荐答案
失败，因为此是您代码中的文档。
It fails because this is the document in your code.
您想要使用当前焦点项目的索引（ document.activeElement ），或者如果您使用委派事件，则可以确保此是当前项目。
You want to use the index of the currently focused item (document.activeElement), or if you use delegated events you can make sure this is the current item.
无论是否有 tabindexes ，此最终版本都有效。它也包含在内：
This final version works whether there are tabindexes or not. It also wraps around:
他们都使用自定义jQuery我添加的选择器名为：focusable 以选择所有可聚焦元素（包括链接）：
They both use a custom jQuery selector that I add called :focusable to select all focusable element (including links):
// 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 ）：
You can use the same custom selector in the event handler if you like. Then it will even work on anchor links (if you change the event to keydown instead of keypress):
$(document).on('keydown', ':focusable', function (e) {
链接示例： http：// jsfiddle.net/5WkVW/15/
这也使用上的委托，听取文件上的 keydown 事件。然后应用jQuery选择器，然后将函数应用于导致事件的任何匹配元素。这更有效，因为它只在事件时应用选择器（而不是将多个事件处理程序应用于每个DOM匹配元素）。
Example with link: http://jsfiddle.net/5WkVW/15/
This also uses a delegated on, listening for the keydown event on the document. It then applies the jQuery selector, it then applies the function to any matching element that caused the event. This is much more efficient as it only applies the selector at event time (rather than apply multiple event handler to each DOM matching element).
$(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();
}
});
*注意：警报可能会干扰焦点，所以使用 console.log 获取类似的输出并在大多数浏览器的调试窗口中查看（如Chrome的F12调试工具）。
*Note: alerts can interfere with focus, so use console.log for output like that and view in most browser's debug window (like Chrome's F12 debugging tools).
这一个包装回到最后一个项目并且也适用于选择（默认行为被阻止，所以你只能使用空格打开或上/下选择选项。
This one wraps back to the first item from the last and also works on selects (the default behavior is blocked, so you can only use space to open or up/down to select options.
$('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();
}
});
请求的文档版本： http://jsfiddle.net / TrueBlueAussie / 5WkVW / 5 /
Requested "document" version: http://jsfiddle.net/TrueBlueAussie/5WkVW/5/
$(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();
}
});
这篇关于按下输入时如何将焦点移动到下一个字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
