このようなテキストフィールドがつくりたいのですが

質問

http://www.mag2.com/j/new/ip/01/0001.html
↑テキストフィールド（メールアドレスを入力）
このようなテキストフィールドがつくりたいのですが

<input name="name_2" type="text" value="（メールアドレスを入力）" size="25">
これで最初から文字は入りますが、サイトのようにフィールド内をクリックすると（メールアドレスを入力）を消す仕組みが分かりません。
また、テキストフィールド内の文字が灰色になっていますが、これはCSSの設定でしょうか？
検索で探してみても欲しい情報に到達できず困っております。
ご存知でしたら宜しくお願いします。

回答No.1

yyr446 · ベストアンサー

ご提示のページは「JQuery」という有名なJavascriptのライブラリーとCSSを使って実現しています。
<input class="rdemail text passive" type="text" name="rdemail"/>
のソース部分を探ってみると、
129 var mailFormat = /^[\+\-_a-zA-Z0-9][a-zA-Z0-9\?\+\-\._\/]*\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,6}|[0-9]{1,3})(\]?)$/;
130 var regComment = '(メールアドレスを入力)';
131
132 $( '.reg input.rdemail, .del input.rdemail' ).val( regComment );
133 $( 'input.rdemail' ).addClass( 'passive' );
134 $( 'input.rdemail' ).focus( function() {
135 $( this ).removeClass( 'passive' );
136 var rdemail = $( this ).val();
137 if( rdemail == regComment ) {
138 $( this ).val( '' );
139 }
140 });
141 $( '.reg input.rdemail, .del input.rdemail' ).blur( function() {
142 var rdemail = $( this ).val();
143 if ( rdemail == '' ) {
144 $( this ).val( regComment ).addClass( 'passive' );
145 }
146 });
147 $( 'form' ).submit( function(){
148 var rdemailObj = $( '.rdemail', this );
149 if ( ! ( rdemailObj ).size() ) return true;
150 var rdemail = rdemailObj.val();
151 if ( rdemail == '' || rdemail == regComment ) {
152 alert( 'メールアドレスを入力してください。' );
153 rdemailObj.focus();
154 return false;
155 } else if ( rdemail.search( mailFormat ) ){
156 alert( 'メールアドレスの書式が不正です。' );
157 rdemailObj.focus();
158 return false;
159 }
160 });
こうなっています。マウスがrdemailクラスのinputタグにフォーカスした時、value値や追加のクラスを消したり追加したりして実現してます。

この部分だけなら、JQuery使わなくてもJavaScriptとCSSで比較的簡単に
実現できると思いますが、そのためにはJavaScriptの知識が不可欠です。

お礼

Javascriptだったのですか。。
完全に専門分野外なので今回は諦める事にしますが
今後「JQuery」に関しては知識として勉強してみます。
無駄はしません。ありがとうございました。