inputにフォーカスすると消える文字をjQueryで実装する

このブログの検索フォームでも使用している、フォーカスすると消える文字(何も入力が無ければ初期値に戻す)を、jQueryだけで実装する方法を紹介します。

実装方法は凄く単純で、inputのvalueに予め文字列を入れておき、jQueryの設定ファイルに以下のコードを記述するだけです。

// フォーカスで消える文字
$(function() {
	$("input[@type='text']")
		.focus(function() {
			if ($(this).val()=="inputの文字列") { $(this).val("") }
		})
		.blur(function() {
			if ($(this).val()=="") { $(this).val("inputの文字列") }
		});
});

input[@type='text']の部分は、通常のjQuery同様CSSの記法で指定して下さい。

補足説明

inputの初期文字列にマルチバイト文字(日本語など)を使いたい場合は、設定ファイルをHTMLの文字コードと合わせて保存するか、エンコードマニアックス辺りでJavaScript文字列にエンコードしてあげて下さい。

尚、この実装の為だけにjQueryを使うのはあまりに不毛なので、あくまでも他でjQueryを使用してる際の"おまけ"程度に考えて頂ければと思います。

Comment(0)

Post your commnet

Trackback(0)

Trackback URL
Permanent link

Recent Entries
Category
Archives
Tag Cloud
あわせて読みたいブログパーツ