[JavaScript]type="hidden"の値の変更を検知する方法

ある案件で機能を追加する際、hiddenの値の変更を検知する必要があった。

jQueryを使用していたため、changeイベントで変更を監視すればいいや〜と軽く考えていた。

しかし、イベントが発火しない。。。

他の方法を模索すると、MutationObserverを使って変更を検知することができたので、方法を紹介します。

const hidden = document.getElementById('hidden');
const display = document.getElementById('display');

const observer = new MutationObserver((mutations) => {
    display.value = hidden.value;
});

const config = {
    attributes: true
};
observer.observe(hidden, config);

使用例

コード説明

今回は、hiddenを対象ノードにします。

const hidden = document.getElementById('hidden');
const display = document.getElementById('display');

１：hidden・・・・今回の主役！

２：display・・・・hiddenの値を表示する役割

const observer = new MutationObserver((mutations) => {
    display.value = hidden.value;
});

オブザーバインスタンスを作成し、｛　｝内にやりたい処理を書いていきます。

今回はdisplayにhiddenの値を表示するために値をセットする処理を記述しました。

const config = {
    attributes: true
};

​オブザーバの設定をしていきます。

今回は対象ノードの変更を監視したかったので、[attributes]をtrueにしました。

他にも以下のようなオプションがあります。

・characterData：文字データの変更を監視

・childList：子要素の変更を監視...etc

詳しくはこちらをご覧ください。

attributes、characterData、childListいずれかtrueが必須となっています。

observer.observe(hidden, config);

最後に、対象ノードとオブザーバの設定を渡します。

type="hidden"の変更の監視方法は以上です。

ぶりを目指してコツコツと