THE HAM MEDIA BLOG

jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト:応用 機能追加編

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
javascript
jquery
FORM
フォーム

jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト:応用 機能追加編

以前にご紹介した
jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト

それを使って、今行っている案件をこなそうと思ったら、
3つ程改良したい部分が出てきた。

一つ目はあらかじめ文字を出現させていて、
そのままsubmitされた場合、デフォルトの文字のままだった場合、
それを削除するというもの。

二つ目は、あらかじめHTMLの段階でvalueをセットしていた場合や、
以前入力していたのをあらかじめ表示させておくなどをした場合、
デフォルトの文字を表示させないようにするというもの。

3つめは単純、フォーカスがあった部分の
背景の色を変えて、入力している部分がわかるようにするもの。

以上3点を加えたものを作ってみた。

※2011/06/19 add
jQuery1.2〜1.2.6までは今回の方法でも動作しますが、1.3以降のバージョンでは、ボタンクリック時にうまく動作しなくなっています。
【jQuery】inputのvalue値をもとにしたセレクタがうまく動かない?

サンプル

■サンプルHTML

<input type="text" value="" /><br />
<input type="text" value="サンプルテキスト" /><br />
<input type="button" class="samp-button" value="クリック" />

上がvalue未セット、下がセット済みのテキストエリアと、
submit代わりのボタンを今回配置するサンプルを用意した。

■サンプルJSソース

$(function(){
	$('input[value=""]').val("キーワードを入力")
		.css("color","#969696");   
    $("input").focus(function(){   
        $(this).css("background-color" , "#dbdbff");
        if(this.value == "キーワードを入力"){   
        	$(this).val("").css("color","#000");   
        }   
    });   
    $("input").blur(function(){   
        $(this).css("background-color" , "#fff");
        if(this.value == ""){   
            $(this).val("キーワードを入力")
            	.css("color","#969696");   
        }   
        if(this.value != "キーワードを入力"){   
            $(this).css("color","#000");  
             
        }   
    });
    $("input.samp-button").click(function(){
		$('input[value="キーワードを入力"]').val("");
	});
});

解説は次の章で行います

■サンプルプレビュー



サンプルの2つのテキストボックスのうち、
上は最初の値を何もいれていなく、
下は最初の値を「サンプルテキスト」と入れておいています。

JSソースの解説

■valueの値でデフォルトを入れるか

$(function(){
	$('input[value=""]').val("キーワードを入力")
		.css("color","#969696");
});

最初のvalueの値が何も入っていない時に文字を入れる場合、
必要となるのは、valueに値が入っているかどうか。
それはinput[value=""]でフィルターをかけたもので指定をする。

■フォーカス時の背景色の変更

$(function(){
	$("input").focus(function(){   
		$(this).css("background-color" , "#dbdbff");
    $("input").blur(function(){   
        $(this).css("background-color" , "#fff");
    });
});

これも単純なもので、focusがあった場合と、
それがなくなった場合のblurの二つを設定すればよい。

テキストエリアの色はbackground-colorで変更可能だ。
枠の色を変化させたいときはborder-colorでもできる。
好みによって変化さてみてほしい。

尚、これの別な方法としては、focusでクラスを追加し、
blurでクラスを除去する方法もある。
あらかじめCSSでそのクラスに対して装飾しておけば、
クラスが追加されたときに適応されるようになる。
CSSの指定が多い場合などはそちらの方が都合がいいかもしれない。

■ボタンを押した時、デフォルトのvalue値を削除

$(function(){
	$("input.samp-button").click(function(){
		$('input[value="キーワードを入力"]').val("");
	});
});

これは先ほどのがvalueが空の時に出現させたものの逆で、
指定の値が入っていた場合に空にするというもの。

用途などで臨機応変に変化を

今回のは応用というより機能追加ができるかがポイント。
必要なことは何かを考えて自分で設定を増やして欲しい。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る