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');
	});
});

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

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

テーブルを綺麗なデザインにしてくれたり並び替え(ソート)もできるjQuery「tablesorter」前のページ

画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」次のページ

関連記事

  1. SweetDropdown

    JavaScript

    スタイリッシュで多彩なドロップダウンを実装できる「SweetDropdown」

    SweetDropdownは、多彩なドロップダウンを実装することができ…

  2. pull-to-reload

    JavaScript

    下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

    pull-to-reloadは、Webページ内で下へ引くだけでページを…

  3. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  4. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  5. JavaScript

    指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方

    ちょっと面白そうだったので試してみました。画像を表示させるまでの間にロ…

コメント

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

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

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP