JavaScript changeイベントでテキストボックスから移動時に値を取得する

2022年10月28日

環境
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」が表示されます。

JavaScript

Posted by arkgame

関連記事: