如何轉換回車鍵按入網頁的按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>