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. jQuery Text Fade Delay
  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  3. JavaScript

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「…

  4. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  5. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

コメント

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

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

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP