Javascript

フォームで使われるイベントを見てみよう

フォーム部品でよく使われるさまざまなイベントについて見ていきます。

  • focus
  • blur
  • input
  • change

focus

・HTMLのフォーム部品に関するイベントについて見ていきます。今回はテキストエリアで入力したイベントをコンソールで表示してみます。

・まずはHTMLでtextareaタグを付けて、JavaScriptでは定数を作りtextareaの要素を取得していきます。

・定数に対して addEventListener() としてまずはfocusイベントについて見ていきます。要素にフォーカスしたとき、 Console に focus と表示出来ます。

・ text.addEventListener('focus', () => {console.log('focus’);});というように書いていけばいいでしょう。

blur

・定数に対して addEventListener() としてblurイベントはが発生したときはfocusが外れたとき、 Console にblurと表示出来ます。

・text.addEventListener('blur', () => {console.log('blur’);});と書いていきましょう。

input

・定数に対して addEventListener() としてinputイベントが発生した場合は、要素に文字や数字を入力したとき、 Console にinputと表示出来ます。

・text.value.lengthとすると文字数を表示することも出来ます。テキストエリアに入力された値は value プロパティで取得できるので、さらに .length とすれば文字数を取得することができます。

・text.addEventListener('input', () => {console.log(text.value.length);});と書いていけばいいでしょう。

change

・定数に対して addEventListener() としてchangeイベントについて見ていきます。更新が確定したとき、 Console にchangeと表示出来ます。

・text.addEventListener('change', () => {console.log('change’);});と書いていきましょう。

-Javascript