如何转换回车键按入网页的按Tab键

Question

回车键应该像一个Tab键按下工作。回车键TextArea和提交按钮应该照常工作。焦点应该跳过从下一个元素当下一个字段被禁用/只读。

谢谢，

Answer 1

首先，这可能不是一个好主意可用性方面。然而，这里的东西应该工作：

$(":input").on("keydown", function(event) { 
    if (event.which === 13 && !$(this).is("textarea, :button, :submit")) { 
     event.stopPropagation(); 
     event.preventDefault(); 

     $(this) 
      .nextAll(":input:not(:disabled, [readonly='readonly'])") 
      .first() 
      .focus(); 
    } 
}); 

例子：http://jsfiddle.net/NDcrk/

是找到下一个输入可能必须改变，这取决于你的标记的部分。

Answer 2

我遇到了类似的问题，我想按数字键+来选择下一个字段。现在我已经发布了一个我认为会帮助你的图书馆。

PlusAsTab：一个jQuery插件，将numpad plus键用作tab键等价物。

既然你想进入/↵相反，你可以设置的选项。找出您想要与jQuery event.which demo一起使用的密钥。

JoelPurra.PlusAsTab.setOptions({ 
    // Use enter instead of plus 
    // Number 13 found through demo at 
    // https://api.jquery.com/event.which/ 
    key: 13 
}); 

样本HTML

<!-- Enable enter as tab as the default for all fields in this form --> 
<form data-plus-as-tab="true"> 
    <input type="text" value="Enter skips to the next field" autofocus="autofocus" /> 
    <!-- Exclude this textarea --> 
    <textarea data-plus-as-tab="false">Enter works as usual</textarea> 
    <input type="text" value="Enter skips to the next field" /> 
    <select><option>Enter skips here too</option></select> 
    <!-- Exclude this submit button --> 
    <button type="submit" data-plus-as-tab="false">Enter works as usual</button> 
</form> 

正如你所看到的，很容易使容器中的所有元素与data-plus-as-tab="true"，并且很容易排除的具体内容与data-plus-as-tab="false"。您还可以使用$('textarea, :button').plusAsTab(false);从javascript中排除某些类型（在现有元素上）。

您可以在PlusAsTab enter as tab demo中自己尝试一下。

Answer 3

此解决方案适用于我。在IE和FireFox上测试过。

<script type="text/javascript"> 
    function tabE(obj, e) { 
     var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
     if (e.keyCode == 13) { 
      var ele = document.forms[0].elements; 
      for (var i = 0; i < ele.length; i++) { 
       var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
       if (obj == ele[i]) { 
        ele[q].focus(); 
        break 
       } 
      } 
      return false; 
     } 
    } 
</script> 

<form METHOD="POST"> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <INPUT TYPE="submit" Value="Ok"> 
</form> 

我发现它here。

Answer 4

如何检查表单元素在这种情况下显示？ 我有许多输入（文本框，单选按钮，），但显示的一些元素，有些元素不显示

<script type="text/javascript"> 
function tabE(obj, e) { 
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
if (e.keyCode == 13) { 
var ele = document.forms[0].elements; 
for (var i = 0; i < ele.length; i++) { 
var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
if (obj == ele[i]) { 
ele[q].focus(); 
break 
} 
} 
return false; 
} 
} 
</script> 

<form METHOD="POST"> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<INPUT TYPE="submit" Value="Ok"> 
</form>