3個步驟解決 WordPress Ninja Forms 接收不到 jQuery 事件的災難

今天藥藥遇到一個超級棘手的 Bug 🐛。 我們維護的打卡系統中，有一個數字輸入欄位。 原本設計是給人打卡用的，結果因為瀏覽器預設按鍵盤的 ↑ (上) 和 ↓ (下) 會自動增減數字。 這下好了，使用者這容易手殘誤觸，打卡記錄直接亂掉！😱

為了拯救這個世界（？），我決定要把這個雞肋的功能封印起來！

⚔️ 第一關：尋找解法

網路上隨便一搜，StackOverflow 大神們都說：「簡單啦！用 jQuery 把 keypress event 擋掉就好！」 我看了一下範例程式碼，嗯，邏輯很清楚，就是偵測到 ↑ 或 ↓ 就 preventDefault() (取消動作)。

$(document).ready(function () {
    $("input[type=number]").on("focus", function () {
        $(this).on("keydown", function (event) {
            // 38 是上，40 是下
            if (event.keyCode === 38 || event.keyCode === 40) {
                event.preventDefault(); // 停！不准動！
            }
        });
    });
});

感覺很簡單對吧？我當時也是這麼想的…

🚧 第二關：WordPress 的傲嬌屬性

滿懷信心地把代碼貼上去，結果… 報錯了。 原來 WordPress 為了避免衝突，預設把 $ 這個符號鎖住了。 在此呼籲各位 WP 開發者，記得把 $ 換成 jQuery：

jQuery(document).ready(function () {
    jQuery("input[type=number]").on("focus", function () {
        jQuery(this).on("keydown", function (event) {
            if (event.keyCode === 38 || event.keyCode === 40) {
                event.preventDefault();
            }
        });
    });
});

🕵️‍♀️ 第三關：Ninja Forms 的神秘結界

改完之後，錯誤消失了，但是… 功能還是沒生效！(崩潰) 為什麼？！我的 focus 事件就像石沉大海一樣，完全沒觸發。

藥藥化身柯南查了半天，才發現原來是表單外掛 Ninja Forms 在搞鬼。 它是用 AJAX 動態載入的，所以當一般 jQuery(document).ready 執行時，表單根本還沒生出來！

要等到 Ninja Forms 準備好，我們必須監聽它專屬的事件 nfFormReady：

jQuery(document).on("nfFormReady", function (e, layoutView) {
    // 這裡才是安全的避風港
});

這招在官方文件裡居然沒寫！還是熱心網友在 StackOverflow 提供的線索，真是高手在民間。

🎉 最終解法

結合以上所有血淚經驗，最終的完美程式碼長這樣：

jQuery(document).on("nfFormReady", function (e, layoutView) {
    console.log("Ninja Forms 準備好了，開始封印上下鍵！");
    jQuery("input[type='number']").on("focus", function () {
        jQuery(this).on("keydown", function (event) {
            if (event.keyCode === 38 || event.keyCode === 40) {
                event.preventDefault();
            }
        });
    });
});

終於！那該死的數字再也不會亂跳了！ 希望能幫到同樣被 Ninja Forms 折磨的朋友們，我們下次見！👋

📚 參考資料

1. StackOverflow: Prevent arrow keys from changing values
2. StackOverflow: Custom jQuery not working on Ninja Forms