輸入鍵的作用就像制表鍵在表格上不起作用

Question

我有一個作為選項卡的輸入鍵。 它適用於我的其他文本框，但在我到達表格數據后，它不再起作用。 我的目標是在我按表數據上的“輸入”鍵后，如何將 go 轉到下一個文本框？

HTML：

<table class="table table-bordered" border="1" class="classtable" id="applicanttable">
     <tr>
                <th>#</th>
                <th>B#</th>
                <th>W#</th>
                <th>W #</th>
                <th>Action</th>
             </tr>
     
            <tbody class="appendtablee" id="wew">
            </tbody>

腳本：

    //Enter key that acts as a tab key.
    $('input').keypress(function(e){
        if(e.which==13){ 
            $("[tabindex='"+(parseInt($(this).attr("tabindex"))+1)+"']").focus();
            e.preventDefault();
        }
    });   

這個 function 為每個文本框創建一個 tabindex。

$(function() {
    var tabindex = 1;
    $('input,select').each(function() {
        if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);
            tabindex++;
        }
    });
});

Answer 1

邏輯似乎很好。 唯一的問題似乎是表單提交。

默認情況下，您的輸入元素是表單的一部分，在兩種情況下表單提交和頁面刷新。

1. 當我們點擊提交按鈕時。
2. 當用戶點擊 Enter 鍵時。

如果這是問題，那么您將需要使用

e.preventDefault()

在表單提交事件上。 這將阻止在單擊輸入時提交表單（但是您需要對代碼進行一些調整，因為即使單擊提交按鈕也會阻止表單提交，在這種情況下您需要檢查添加一個額外的查看）。

如下所示：

function submitForm(e) {
   if(e.which===13) {
      e.preventDefault(); // This will prevent the default refresh on click of Enter key
   }

   // Continue with your form submission logic
}