フォーム部品でよく使われるさまざまなイベントについて見ていきます。
- 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’);});と書いていきましょう。