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が空の時に出現させたものの逆で、
指定の値が入っていた場合に空にするというもの。
用途などで臨機応変に変化を
今回のは応用というより機能追加ができるかがポイント。
必要なことは何かを考えて自分で設定を増やして欲しい。