使用 Enter 键移动到输入答案

【问题标题】：Use Enter Key to move to inputs使用 Enter 键移动到输入
【发布时间】：2012-04-25 07:36:38
【问题描述】：

是否可以使用回车键移动到表单中的下一个输入字段？我也想使用标签，但回车键也不错。

仅供参考 - 我确实有几个文本区域，我需要在输入时使用回车键返回。这会是冲突吗？

谢谢。埃里克

【问题讨论】：

那真的很不直观，因为对于 textareas，也可以输入换行符
你可以吗？是的。你应该？不。与默认浏览器行为混淆是不好的形式。浏览器训练用户这样做和那样做 - 至少对我来说，如果你偏离了那个，那个网页会激怒我。
+1 表示一个亲切的想法。是的，这不直观，但我发现自己在一个未完成的表单上输入。现在，重新考虑您的问题，看到我专注于被遗忘的输入，这完全是一个好主意。（不是说毕竟按回车（如果输入了所有输入）它将提交表单！）+100
有可能，但不要那样做。 TAB 键就是为此而生的。

标签： javascript jquery forms input enter

【解决方案1】：

在黑暗中拍摄（假设您的文本区域已排好）：

$(".myTextareas").keypress(function(e) {
    if(e.which == 13) {
        $(this).next('.myTextareas').focus();
    }
});

【讨论】：

【解决方案2】：

如果您要在要循环输入的字段中添加一个名为“TabOnEnter”的类。

$(document).on("keypress", ".TabOnEnter" , function(e)
  {
    //Only do something when the user presses enter
    if( e.keyCode ==  13 )
    {
       var nextElement = $('[tabindex="' + (this.tabIndex+1)  + '"]');
       console.log( this , nextElement ); 
       if(nextElement.length )
         nextElement.focus()
       else
         $('[tabindex="1"]').focus();  
    }   
  });

//Hidden inputs should get their tabindex fixed, not in scope ;)
//$(function(){ $('input[tabindex="4"]').fadeOut();  })

不像以前的答案那么可爱，但现在可以了：

http://jsfiddle.net/konijn_gmail_com/WvHKA/

通过这种方式，您可以使用标准 HTML 功能 (tabindex) 来确定循环顺序。隐藏元素的 tabindex 应该被移除。

【讨论】：

+1。我喜欢这个类的想法，函数的内容显示了一般原则，但实际的解决方案可能需要弄清楚下一个可编辑元素是什么，而不仅仅是使用.next()。
@nnnnnn 现实世界的解决方案必须为我猜的每个输入元素设置 tabindex。
这个方法只循环输入文本，那么 textarea 呢？还有一件事：如果其中一个输入具有 style="display:none;"，则 Enter 键在具有 display:none; 的输入之前停止对文本输入起作用。 !
@armen，无论输入什么隐藏，也应该删除 tabindex。虽然在文本区域上循环是个好主意，但我添加了它。
textarea 还是有一点问题，因为当它有焦点的时候，输入键必须创建新行，而不是跳转到下一个元素。此外，这种方法对我不起作用，因为一半表单元素是“静态的”，而另一半是通过 ajax 调用呈现的，根据情况不同数量的输入元素，将元素随机放置在表单的不同位置，所以有对它们来说没有“连续性”，因此不能告诉 ajax 返回那些按制表符索引的元素。