課題【イベント操作】ーNo.04

課題内容

  • ＜概要＞
  • 　inputタグ（typeはtext）で入力項目を用意しましょう。
  • 　入力項目には、
  • 　「これは入力項目です」
  • 　と表示させておきましょう。
  • 　このinputタグに対して、
  • 　inputというタグ指定で要素を取得して、
  • 　入力が可能な状態になった時に、
  • 　「入力可能な状態になりました」
  • 　という文字列を、
  • 　アラートとコンソールに、
  • 　それぞれ表示しましょう。
  • 　　

出力結果

表示としては、

このような入力項目を表示して、

実際に入力できる状態になった時に、

コンソールに以下の表示を行います。

入力可能な状態になりました

ポイント（イベント操作）

DOMのイベント操作に関しては、

  • 対象のDOM操作の要素を取得する
  • 要素のイベントの処理を設定する

を行うことで、

イベントを操作することができます。

このイベント操作の方法に関しては、

以下の記事を参考にしてください。

【基礎を抑える_06】「イベント操作」

イベント操作（入力可能な要素が選択された時の操作）

イベント操作に関して、

「入力可能な要素が選択された時の操作」

に関しては、

イベント操作の中でも、

「focus」

を使って操作を行います。

このイベント操作の方法に関しては、

以下の記事を参考にしてください。

【イベント操作】入力可能な要素が選択された時の操作を行う

答え

HTML

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <input type="text" value="これは入力項目です">
  </body>
  <script type="text/javascript" src="sample.js"></script>
</html>

javaScript

// DOMを取得する
let sample = document.querySelector('input[type="text"]');

// イベント操作
sample.addEventListener('focus', event => {

  // コンソールに表示
  console.log('入力可能な状態になりました');
});