【JavaScript】jQueryで実装していたコードをVanilla JSに書き換え

やること

Enterキーを押したときに次の入力フィールドに自動的にフォーカスを移動させる機能を実装しています。
jQueryで実装しているものをVanila JSに書き直してみます。

jQuery

$(":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();
    }
});

Vanilla JS

document.addEventListener('keydown', function(event) {
    if (event.target.matches('input, select, textarea')) {
        if (event.key === 'Enter' && 
            !event.target.matches('textarea, button, input[type="submit"], input[type="button"]')) {
            event.stopPropagation();
            event.preventDefault();

            let currentElement = event.target.nextElementSibling;
            let nextInput = null;

            while (currentElement !== null) {
                if (currentElement.matches('input, select, textarea') && 
                    !currentElement.disabled && 
                    currentElement.getAttribute('readonly') !== 'readonly') {
                    nextInput = currentElement;
                    break;
                }
                currentElement = currentElement.nextElementSibling;
            }

            if (nextInput) {
                nextInput.focus();
            }
        }
    }
});

実装

• イベントリスナーの設定

document.addEventListener('keydown', function(event) {
    // ... (イベントハンドラの中身)
})

この条件文は、キーが押されたターゲット要素が入力フィールド（input, select, textarea）であるかどうかをチェックします。

• 入力要素の確認

if (event.target.matches('input, select, textarea')) {
    // ... (条件に合致した場合の処理)
}

この条件文は、キーが押されたターゲット要素が入力フィールド（input, select, textarea）であるかどうかをチェックします。

• Enterキーの処理

if (event.key === 'Enter' && 
    !event.target.matches('textarea, button, input[type="submit"], input[type="button"]')) {
    // ... (Enterキーが押された場合の処理)
}

この条件文は、押されたキーがEnterキーであり、かつターゲット要素がテキストエリア、ボタン、送信ボタン、通常のボタンでないことを確認します。

• イベントの停止

event.stopPropagation();
event.preventDefault();

これらの行は、イベントの伝播を停止し、デフォルトの動作（例：フォームの送信）を防ぎます。

• 次の入力要素の検索

let currentElement = event.target.nextElementSibling;
let nextInput = null;

while (currentElement !== null) {
    if (currentElement.matches('input, select, textarea') && 
        !currentElement.disabled && 
        currentElement.getAttribute('readonly') !== 'readonly') {
        nextInput = currentElement;
        break;
    }
    currentElement = currentElement.nextElementSibling;
}

このループは、現在の要素の次の兄弟要素を順に調べ、有効な入力フィールドを見つけます。見つかった場合、その要素をnextInputに設定します

• フォーカスの移動

if (nextInput) {
    nextInput.focus();
}

次の入力要素が見つかった場合、その要素にフォーカスを移動させます。

まとめ

jQueryの抽象度が高いのがわかる。もう少しVanila JS頑張ってみよう。