《Javascripts》入力毎に発火するonInputの使い方を解説

JavaScript

JavaScriptsで入力ごとに発火させる方法

onInput属性を使用する

Riot.jsを業務中に扱っていた際に入力フォームをユーザーが触った後、ある指定の2つのinputフォーム両方に値が入っているかをリアルタイムで判断したいという場面に遭遇。このやり方をググってみると「onInput属性」を使って解決できたので「入力毎に発火させる方法」を今回の記事で紹介したいと思います。結論からいうと以下のように<input>タグに「onInput属性」と「その処理内容が定義されたメソッド」を使用すればOK。

フォームに触る毎にonInputメソッドが発火します。実装の仕方はとっても簡単です。

onInputについて少し詳しく調べる

onInputの使い方自体は簡単だったのであっさりと記事の目的は終了してしまいましたが、どうせなのでここで「イベントハンドラ」について調べてみたので知識を共有します。

イベントハンドラとは

javascriptsを書いたことある人なら一度は聞いたことあると思いますが、何なのかをきちんと整理しておくて「ユーザーアクションによって発火するイベント」のことを指します。今回紹介した「onInput」もイベントハンドラですし、よく目にする「click」なんかもイベントハンドラです。他にも種類がたくさんあるので気になる方は以下のサイトを確認しておきましょう。

JavaScript: イベントハンドラの一覧
JavaScriptで扱うイベントハンドラの一覧です。

イベントドリブン(イベント駆動型モデル)

イベントハンドラを定義することによって、ユーザーのアクションにより様々なイベント(処理)が発生します。これを「イベントドリブン(イベント駆動型モデル)」と言います。

イベントリスナー

イベントハンドラーは実は一点弱点があります。それは「同一の要素/同一のイベントに複数のイベントハンドラーを結びつけることができない」という点です。これに対して「イベントリスナー」は「同一の要素/同一のイベントを複数のイベントに複数のイベントハンドラーを結びつけることができる」というメリットがあります。

エンジニアにおすすめのアイテム

記事の内容とは別に、僕自身が保有する業務効率アップ、スキルアップを後押しするお勧めアイテムを紹介します。割とガチでお勧めなのです。

目の保温マッサージ

エンジニアの1日の業務は大半がディスプレイと睨めっこ。帰宅すると目が疲労で非常に重くなります。ひどい時は軽い頭痛になったりと結構深刻。そこで僕自身が毎日使っているのが目元マッサージ機です。

アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー

アイマッサージャーを使ってから、翌日の疲労感がだいぶ軽減されました。またマッサージ自体とっても気持ち良くて、布団に入るのが毎日楽しみになりました。コスパまじで最強アイテムです。

座椅子をゲーミングチェア風に

ディスプレイの長時間利用と同時にエンジニアは座椅子の上に何時間も座る運命にあります。椅子が快適だと疲労度が大きく変わると思った私は以下の2点のアイテムを購入しました。

IKSTAR クッション 低反発 座布団 第五世代 オフィス IKSTAR クッション 低反発【メーカー直営・1年保証付】 ランバーサポート

気に入りすぎて、オフィス用だけではなく、自宅用も購入してしまいました。導入してから長時間座ることでのお尻の痛みや、腰の痛みが激減しました。なので体の健康を考えるなら、導入するべきアイテムですね。

タイトルとURLをコピーしました