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>

　//要素「name」の値を取得

const cft = document.getElementById("name");

// addEventListenerで対象にchangeイベント

cft.addEventListener("change",funA);

// funAの関数を実行します

function funA() {

document.getElementById("show").textContent = cft.value;

}

</script>

</body>

</html>

<!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>

<!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

関連投稿: