按下输入时如何将焦点移动到下一个字段？

你可以告诉我当按下回车键时如何将焦点转移到下一个字段？ 我使用dform插件（将JSON转换为表单）。

我用Google搜索，但这不起作用。 为什么我的焦点不会转移到下一个领域？

JSFiddle： http ： //jsfiddle.net/5WkVW/1/

 $(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值的页面

Answer 1

它失败，因为this是代码中的document 。

您希望使用当前焦点项目的索引（ document.activeElement ），或者如果您使用委派事件，则可以确保this是当前项目。

无论是否有tabindexes最终版本都有效。 它也包裹着：

JSFiddle 1： http ： //jsfiddle.net/TrueBlueAussie/5WkVW/11/

JSFiddle 2： http ： //jsfiddle.net/TrueBlueAussie/5WkVW/12/

他们都使用我添加的自定义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) { 

链接示例： http ： //jsfiddle.net/5WkVW/15/

这也使用委托on ，监听document上的keydown事件。 然后它应用jQuery选择器， 然后将该函数应用于导致该事件的任何匹配元素。 这样效率更高，因为它仅在事件时应用选择器（而不是将多个事件处理程序应用于每个DOM匹配元素）。

---

旧版本如下：

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/5WkVW/3/

 $(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调试工具）。

更新： http ： //jsfiddle.net/TrueBlueAussie/5WkVW/4/

这个包装回到最后一个项目并且也适用于选择（默认行为被阻止，因此您只能使用空格打开或向上/向下来选择选项。

 $('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/

 $(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(); } }); 

Answer 2

以下代码应该这样做; 它使用tabIndex属性。 如果这是不可接受的，请告诉我们：

 $(function() { $('input').on('keypress', function(e) { e.which !== 13 || $('[tabIndex=' + (+this.tabIndex + 1) + ']')[0].focus(); }); }); 

下拉已经有输入密钥以打开下拉。

JS FIDDLE DEMO

为了能够在移动到下一个表单元素之前执行某些操作，您可以使用以下版本：

 $(function() { $(document).on('keypress', function(e) { var that = document.activeElement; if( e.which == 13 ) { e.preventDefault(); alert( "dd" ); $('[tabIndex=' + (+that.tabIndex + 1) + ']')[0].focus(); } }); }); 

DEMO

Answer 3

在顶级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() } } 

Answer 4

我创建了一个非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：

 
 Field 1: 
 Field 3: 
 Field 2:   

Answer 5

试试我从你的小提琴修改过的这个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(); } }); 

我希望这有帮助。 如果是的话，请给我一个投票。 干杯。