セミの声が本格的に聞こえはじめ、夏の空気がむんっと感じられる季節になってきました。
冷たいアイスと冷房が手放せない日々、皆さんいかがお過ごしでしょうか？
私はというと、PCの熱と外気の暑さで、ちょっとしたサウナ状態に…
そんな中でも、ちょっとしたコーディングの工夫で「ラクできた！」という感動をシェアすべく、
今回はフォーム入力自動化のあるある落とし穴と、そのスマートな解決策をお届けします！
前回の①からの続きです。
前回の記事では、DOMの value を直接書き換えても、システム側でその変更が認識されないという問題を紹介しました。
見た目は入力されているのに、送信ボタンを押しても「未入力」扱いされる…そんな原因は「イベント未発火」です。
では、どうすればシステムがちゃんと「入力された」と認識してくれるのか？
今回はその答えをJavaScriptで解決していきます。
valueを書き換えるだけでは動かない？
たとえば、入力フォームの自動化でこんなコードを書いたことはありませんか？
document.querySelector('#name').value = '山田 太郎';
見た目はちゃんと入力されたように見えるのに、
**送信してもデータが反映されない…？え？なんで！？**となった経験、ある方も多いはず。
原因：イベントが発火していない！
Webフォームは、「ただ値が入ったか」ではなく、どうやって入力されたかにも敏感です。
特によく使われているのがこの2つのイベント：
input：文字が入力された瞬間change：入力後、フォーカスを外したとき
JavaScriptで value を書き換えるだけでは、これらのイベントは自動では起こりません！
つまり「見た目は入力済み」でも、「実際には入力されていない」状態になってしまうんです。
✅ 解決策：イベントを手動で起こす！
ちゃんとイベントを“自分で”発火させる方法があります✨
javascriptコピーする編集するconst el = document.querySelector('#name');
el.value = '山田 太郎';
// 入力イベント（入力中の処理がある場合）
el.dispatchEvent(new Event('input', { bubbles: true }));
// 変更イベント（フォーカスアウト時の処理など）
el.dispatchEvent(new Event('change', { bubbles: true }));
bubbles: true を忘れずに指定することで、
イベントがフォームの外側まで伝わり、必要な処理がしっかり反応してくれます！
まとめ
- JavaScriptで
valueを書き換えるだけでは、システムが「入力された」と認識しないことがある。 dispatchEvent()を使ってinputとchangeイベントを明示的に発火させる。
