jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryのfocusとblurを使えばフォームが便利になる

jQueryのfocusとblurを使えばフォームを便利にすることができます。focusとはinput要素などにカーソルが合った時のイベントのことで、blurは逆にそれが外れた時のイベントです。今回はこれを使ってfocusの時に空のdiv要素にテキストを挿入して、blurの時にそれをまた空にするといったサンプルを作ってみました。とても基本中の基本なのであまり実用性はないかもしれませんが、とりあえずこんな感じで使うんだなっていうのを知るためだけの備忘録です。

[ads_center]

focusとblurのサンプル

空のdiv要素を置いておいて、input要素にfocusした時に「名前を入力して下さい」と表示されるようにします。そして、input要素がblurになったらdiv要素をまた空にします。まずはHTMLからです。

<div id="box"></div>
<label for="name">Name: </label><input type="text" id="name" />

そして、CSSでfocusされた時のスタイルを作っておきます。focusというクラスはfocusされた時にinput要素に追加するクラスです。

#box {
	font-size: 12px;
	color: red;
}
.focus {
	border: 3px solid red;
}

で、あとはjQueryです。

$(function(){
	$('#name').focus(function(){
		$('#box').text('*名前を入力して下さい');
		$(this).addClass('focus');
	}).blur(function(){
		$('#box').empty();
		$(this).removeClass('focus');
	});
});

これで、できたサンプルがこちらです。

まあすごいどうでもいいんですが、一応こんな感じで使っていくみたいですね。これを色々と応用していけばフォームのバリデーションにも使えますね。

関連記事

  1. nanoGALLERY
  2. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

  3. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

  4. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  5. Rain & Water Effect Experiments
  6. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. KPS-88
  2. Happy Plugs AIR1
  3. cheero Stream 10000mAh
  4. BOSE HOME SPEAKER 300
  5. RP-PC112

アーカイブ

PAGE TOP