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. Multi-Screen.js
  2. JavaScript

    色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」…

    お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ロ…

  3. flipLightBox
  4. Multi-device scrolling menu
  5. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  6. RV gallery-slider

    JavaScript

    軽量でタッチフレンドリーなギャラリースライダー「RV gallery-slider」

    RV gallery-sliderは軽量でタッチフレンドリーなギャラリ…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP