入力フォームに何を入力するかのヒントを表示させておき、マウスカーソルをフォーカスすると同時に文字を消すjQueryです。ソースも長くなく単純なのですぐに採用でき、ユーザービリティの向上を図れます。ただし、ヒントに記述する文面は良く考えておかないとユーザーに要らぬ想像を与えてしまう場合もありますので、ヒント程度の物にしておくことが最善と思います。
JSファイル
- $(document).ready(function() {
- $(“input.input-hint”).val(“検索キーワードを入力してください”);
- textFill($(‘input.input-hint’));
- });
- function textFill(input){ //input focus text function
- var originalvalue = input.val();
- input.focus( function(){
- if( $.trim(input.val()) == originalvalue ){ input.val(”); }
- });
- input.blur( function(){
- if( $.trim(input.val()) == ” ){ input.val(originalvalue); }
- });
- }
ソース2行目の.valに入っている文字列を、ヒントとして表示したいテキストを入れておきます。htmlファイルのinputタグのクラスとして「input-hint」を割り当て、下記のようにCSSファイルで装飾します。
CSSファイル
- .input-hint{color:#999;}
CSSファイルは表示させたいテキストの色見を変えたり設定しておきましょう。最後にJSファイルで設定したクラスをinputタグに割り当てます。
- ソースダウンロードは以下よりどうぞ。ご利用は自己責任にてお願い致します。 JSファイル（dis-search.zip）
お役に立てたらお願いします🙇
Comments