3流プログラマのメモ書き

元開発職→現社内SEの三流プログラマのIT技術メモ書き。 このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。(jehupc.exblog.jpから移転中)

(JavaScript)jQueryでテキストボックスに入力ヒントを表示する

最近、入力フォームのテキストボックスに予めヒントの文字列が入っており、フォーカスが入るとヒントが消え、テキストが入力できるようになるみたいなWEBが増えています。

それを jQuery を使って実装してみました。

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

HTML側はこんな感じです。

  method="post" action="Check" id="input">

type="text" title="備考を入力。" id="memo" name="memo" class="input_hint">

type="submit" value="送信">

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()

}

});