JavaScript Enter 鍵轉 Tab 鍵：表單導航體驗優化

表單輸入體驗優化：Enter 鍵在輸入框間跳轉

預設 Enter 鍵在表單中會觸發提交。某些資料密集型表單 (如會計記帳、庫存登錄) 希望 Enter 鍵像 Tab 鍵一樣移動到下一個欄位，提升錄入效率。

原始實作 (需修正)

<script>
function cgo(obj, element, method) {
    // obj: form 物件, element: 當前元素 name, method: 'prv' 上一個 / 其他 下一個
    for (var tmpa = 0; tmpa < obj.length; tmpa++) {
        if (obj[tmpa].name == element) {
            id = tmpa;
        }
    }
    if (method == "prv") {
        obj[id-1].focus();
    } else {
        obj[id+1].focus();
    }
}
</script>

<form name="form1">
<input type="text" name="a1" onkeyup="cgo(this.form, this.name, '')">
<input type="text" name="a2" onkeyup="cgo(this.form, this.name, '')">
<input type="text" name="a3" onkeyup="cgo(this.form, this.name, '')">
</form>

問題分析

1. onkeyup 會在彈起時觸發，含 Enter、字母、Backspace 等所有鍵，導致任何輸入都跳轉焦點。
2. 未檢查 event.keyCode === 13 (Enter)。
3. id 變數未宣告 (隱性全域變數)。
4. 邊界檢查缺失：第一個欄位按 Shift+Enter、最後一個欄位按 Enter 會報錯。
5. 未阻止表單預設提交行為。

修正版：僅 Enter 鍵觸發、支援 Shift+Enter 反向、邊界保護

<script>
function handleEnterTab(event, form, currentName, direction) {
    // direction: 'next' (預設) 或 'prev' (Shift+Enter)
    if (event.key !== 'Enter') return; // 僅處理 Enter

    var elements = [];
    // 收集所有可聚焦的表單元素 (排除隱藏、禁用、readonly)
    for (var i = 0; i < form.elements.length; i++) {
        var el = form.elements[i];
        if (el.type !== 'hidden' && !el.disabled && !el.readOnly &&
            ['text', 'textarea', 'select-one', 'select-multiple', 'password', 'email', 'number', 'date'].includes(el.type)) {
            elements.push(el);
        }
    }

    var idx = elements.findIndex(function(el) { return el.name === currentName; });
    if (idx === -1) return;

    var nextIdx = direction === 'prev' ? idx - 1 : idx + 1;
    if (nextIdx >= 0 && nextIdx < elements.length) {
        event.preventDefault(); // 阻止表單提交
        elements[nextIdx].focus();
    }
    // 邊界不處理：第一個欄位 Shift+Enter、最後一個欄位 Enter 維持原狀
}

// 綁定方式：建議使用事件委派
document.addEventListener('DOMContentLoaded', function() {
    var forms = document.querySelectorAll('form[data-enter-tab]');
    forms.forEach(function(form) {
        form.addEventListener('keydown', function(e) {
            var target = e.target;
            if (target.form !== form) return;
            var dir = e.shiftKey ? 'prev' : 'next';
            handleEnterTab(e, form, target.name, dir);
        });
    });
});
</script>

<form data-enter-tab>
    <input type="text" name="field1" placeholder="欄位 1">
    <input type="text" name="field2" placeholder="欄位 2">
    <textarea name="field3" placeholder="欄位 3 (多行)"></textarea>
    <select name="field4"><option>選項</option></select>
    <button type="submit">送出</button> <!-- 最後按 Enter 仍會提交 -->
</form>

進階考量

現代框架整合

• Vue 3：@keydown.enter.prevent="focusNext($event)" 配合 ref 陣列管理焦點。
• React：onKeyDown={e => e.key==='Enter' && focusNext(e)}，使用 useRef 陣列。
• Alpine.js：@keydown.enter.window="focusNext($event)" 輕量實作。

Enter 轉 Tab 是特定業務場景的體驗優化，實作時務必精準判斷鍵碼、保護邊界、不干擾原生表單提交與多行輸入，並考慮無障礙與行動裝置差異。