JavaScript changeイベントでテキストボックスから移動時に値を取得する
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
changeイベントの定義
const 変数名 = document.getElementById(セレクター名);
変数名.addEventListener(“change",関数名);
addEventListenerメソッドを使ってchangeイベントが発生した時、指定関数名を実行します。
使用例
<!DOCTYPE html> <html> <body> <p>名前: <span id="show"></span></p> <input type="text" value="山田" id="name" maxlength="10" /> <script> //要素「name」の値を取得 const cft = document.getElementById("name"); // addEventListenerで対象にchangeイベント cft.addEventListener("change",funA); // funAの関数を実行します function funA() { document.getElementById("show").textContent = cft.value; } </script> </body> </html>
実行結果
テキストボックスに値(arkgame)を入力し、Enterキーを押すまたはカーソルを移動すると「名前: arkgame」が表示されます。