Angular.jsで作るノートパッドWebアプリケーション

入力フォームへのBlurイベントの登録

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ノートのタイトルの入力フォームにBlurイベントを登録して、入力フォームからフォーカスが外れた際に、作成した未入力防止用の関数を発動させる方法について、解説致します。
講師:
03:56

字幕

このレッスンでは ノートのタイトルの 入力フォームに blurイベントを登録して 入力フォームからフォーカスが外れた際に 前回のレッスンで作成した 未入力防止用の関数を発動させる方法 について解説いたします まずはダウンロードしてきた こちらの「blur_event」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう それでは まず 前回のレッスンのおさらいです 「note.js」ファイルを エディタで確認してみます そして こちらの部分ですね 前回のレッスンでは ノートの タイトル部分が未入力にならないように こちらの「checkTitle」という関数を 作るところまでやりました 今回は このタイトルを入力する inputボックスに blurイベントを登録して フォーカスが外れたら こちらの「checkTitle」の関数を 呼び出すといった処理を やってみたいと思います htmlファイルに戻ります そして こちらのファイルで 注目していただきたい点は こちらになります この部分は タイトルを入力する 「input」ボックスですね この部分に このように 「ng-blur」と書いて「=」 そして「checkTitle()」と入力しています まず こちらの「ng-blur」ですが 他の「ng-change」や 「ng-click」といった形で 「blur」イベントを登録することができます そして この 「blur」イベントを登録すると この 「input」ボックスから フォーカスが外れた際に こちらの「=」の後の処理が実行されます 今回は前回のレッスンで作成した この「checkTitle」という関数ですね これを実行しろ といった形になります それでは 実際にどのように動作するか こちらの「index.html」を ブラウザで開いて確認してみたいと思います こちらのファイルをブラウザで開きます すると このように表示されてきましたね では 今回実装した内容を 確認してみたいと思います こちらのリストから 適当にクリックします そうすると このように今は 「タイトル2」と表示されていますね それでは こちらの 「タイトル2」を消してみましょう このように 消してみました そして今 この青い枠が inputボックスを囲っているように フォーカスは今 この inputボックスに当たっています それでは こちらの inputボックス以外を クリックしてみましょう すると このように「新しいノート」という テキストが新たに設定されましたね このように タイトルを 未入力にしようとすると このように「新しいノート」という テキストが入ってきて タイトルを未入力にすることが できなくなりました このように動作すれば きちんとプログラム が実装できているといった状態になります 以上で レッスンは終了です 今回は ノートのタイトルの入力フォームに blurイベントを登録して 入力フォームからフォーカスが外れた際に あらかじめ作成しておいた 未入力防止用の関数を 発動させる方法について解説いたしました 以降のレッスンでは ノートデータを個別に削除する方法について 解説いたしますので そちらも併せてご覧ください

Angular.jsで作るノートパッドWebアプリケーション

Angular.jsはJavaScriptライブラリで、複雑なWebアプリケーションを簡単かつ効率的に開発していくことが可能です。このコースではノートパッド機能をもったWebアプリケーションを実際に作り、それをAngular.jsを使って実装する方法について学習します。このコースを見れば、Angular.jsの基本的な内容とワークフローがわかるでしょう。

1時間35分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年11月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。