人気ブログランキング |
(JavaScript)jQueryでテキストボックスに入力ヒントを表示する
最近、入力フォームのテキストボックスに予めヒントの文字列が入っており、フォーカスが入るとヒントが消え、テキストが入力できるようになるみたいなWEBが増えています。
それを jQuery を使って実装してみました。

参考にさせてもらったのは、フォームに入力ヒントを与えるjQuery - YATのBlog非フォーカス時にヒントの表示されるテキストボックス - jQuery 日本語リファレンスです。

HTML側はこんな感じです。
<form  method="post" action="Check" id="input">
<!-- title属性にヒントとなる文字列を入れておく -->
<input type="text" title="備考を入力。" id="memo" name="memo" class="input_hint">
<input type="submit" value="送信">
</form>



CSS側
/*ヒント用スタイルシート*/
input.input_hint{
color:#666666;
}



JavaScript側
$(function(){
//テキストボックスの値に、title属性に設定しているヒントを表示
$("#memo").val( $("#memo").attr('title') );
textFill($('#memo'));

//フォーカスによって、テキストボックスの値を変えるための関数。
function textFill(input){
var originalvalue = input.attr('title');
input.focus( function(){
//フォーカスが入ったとき
if( $.trim(input.val()) == originalvalue ){
//CSSを直接変更するという方法もあるが、今回はヒント用スタイルシートを外す設定に
input.removeClass("input_hint");
//値をクリア
input.val('');
}
});
input.blur( function(){
//フォーカスが外れたとき
if( $.trim(input.val()) == '' ){
//値が入力されなかったら再度ヒント表示
input.val(originalvalue);
input.addClass("input_hint");
}
});
input.parents('form:first').submit(function(){
//フォース送信時に、ヒントの内容を送らないようにする
if(input.val()==input.attr('title')){
input.triggerHandler('focus');
}
}).end()
}
});

by Jehoshaphat | 2012-11-11 21:47 | Webがらみ


<< (JavaScript)連想配... (JavaScript,Act... >>