JavaScriptで複数のinputのvalueをリアルタイム同期

2023年8月20日

ReactやVueを使用していないプロジェクトで、ページ内でタブなどで複数箇所に分かれているが、どれかひとつのinputのvalueが変更されたら他のinputもリアルタイムに同期し変更が適用されて欲しい状況がありました。

素のJavaScriptで記述した場合と、jQueryで記述した場合を載せておくので案件に合わせて使ってください。

<input type="text" name="syncInput" class="sync_input" value="" />

JavaScriptの場合

// ページが読み込まれたときのイベントハンドラ
window.addEventListener('load', function() {
    // クラス名が 'sync_input' であるすべての入力要素を取得
    const allSyncInputs = document.querySelectorAll('.sync_input');

    // 各入力要素に対しての処理
    allSyncInputs.forEach(function(input) {
        // 入力要素に 'input' イベントハンドラを設定
        input.addEventListener('input', function(e) {
            // イベントが発生した入力要素の値を取得
            const inputValue = e.target.value;

            // すべてのリアルタイム同期対象の入力要素に同じ値を設定
            allSyncInputs.forEach(function(syncInput) {
                syncInput.value = inputValue;
            });
        });
    });
});

jQueryの場合

// ドキュメントが読み込まれたときのイベントハンドラ
$(document).ready(function() {
    // 入力要素のクラス名が 'sync_input' であるすべての入力要素に 'input' イベントハンドラを設定
    $('.sync_input').bind('input', function() {
        // イベントが発生した入力要素の値を取得
        const inputValue = $(this).val();

        // 同期対象の入力要素のクラス名が 'sync_input' であるすべての同期対象の入力要素に同じ値を設定
        $('.sync_input').each(function() {
            $(this).val(inputValue);
        });
    });
});

よかったらシェアしてね！