JSP 中實現輸入框回車自動跳轉到下一個輸入框的 JavaScript 方案

問題背景

在 JSP 頁面使用 <c:forEach> 循環生成多個輸入框時，用戶期望在輸入完畢按下 Enter 鍵自動將焦點移至下一個輸入框，提升數據錄入效率。

解決方案

通過 JavaScript 獲取頁面所有 type="text" 的輸入框，構建有序數組，然後在當前輸入框的 onkeydown 事件中判斷按鍵碼為 13（Enter）時，調用 focusNextInput 函數實現焦點跳轉。

核心代碼

function focusNextInput(thisInput, Id) {
    var inputs = document.getElementsByTagName("input");
    var IPS = [];
    for (var i = 0, j = inputs.length; i < j; i++) {
        if (inputs[i].type == 'text')
            IPS[IPS.length] = inputs[i];
    }
    for (var z = 0; z < IPS.length; z++) {
        if (z == (IPS.length - 1)) {
            thisInput.blur();
            break;
        } else if (thisInput == IPS[z]) {
            IPS[z + 1].focus();
            break;
        }
    }
}

使用方式

在每個輸入框上綁定事件：<input type="text" onkeydown="if(event.keyCode==13) focusNextInput(this)">。

注意事項

• 確保輸入框類型為 text，避免密碼框、隱藏域干擾。
• 最後一個輸入框按 Enter 時默認失去焦點（blur()），可根據業務修改為提交表單。
• 若頁面動態添加輸入框，需重新獲取 IPS 數組或使用事件委托。