- ベストアンサー
ヤフーID登録フォームのテキストフィールドクリックでメッセージ表示
- ヤフーIDの登録フォームではテキストフィールドをクリックすると項目ごとにメッセージが表示されます。
- メッセージはアニメーションのように表示され、別のテキストフィールドをクリックしたり他の場所をクリックすると非表示になります。
- この機能を実現するためにはJavaScriptなどを利用する必要があります。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
javascriptの関数に引数を渡して処理する方がスマートに行けます。 ◆サンプル２--↓↓↓ここから---------------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <script language="javascript"> function fncMsgView(id) { document.getElementById(id).style.display = "block"; } function fncMsgNoView(id) { document.getElementById(id).style.display = "none"; } </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body onLoad=> <input type="text" name="hoge" onFocus="javascript:fncMsgView('msg')" onBlur="javascript:fncMsgNoView('msg')"> <div id="msg" style="display:none">メッセージです。</div> <br> ああああああああああああああ<br> いいいいいいいいいいいいいい<br> うううううううううううううう<br> <input type="text" name="hoge2" onFocus="javascript:fncMsgView('msg2')" onBlur="javascript:fncMsgNoView('msg2')"> <div id="msg2" style="display:none">メッセージ２です。</div> <br> ああああああああああああああ<br> いいいいいいいいいいいいいい<br> うううううううううううううう<br> </body> </html> ◆サンプル２--↑↑↑ここまで---------------------------------------- これは各関数（fncMsgView, fncMsgNoView）に引数"id"を渡して、 そのIDを持つ「div」を表示したり隠したりするようになっています。 ※前のサンプルだとjavascriptの関数の中でメッセージを入れていましたが、 表示するメッセージが固定なので、意味がないと思い あらかじめHTML内に記述しています。 最初の画面表示時には[style="display:none"]にて非表示としています。 ほかにもっと良い方法があるかもしれませんが、、 以上、ご参考になれば幸いです。
その他の回答 (1)
- hyter
- ベストアンサー率73% (31/42)
JavaScriptでテキストフィールドのonFocusとonBlurのイベントを拾えば可能です。 ちなみに ・onFocus：フォーカスがあたった時 ・onBlur：フォーカスが離れた時 です。 下記のようなサンプルを作ってみました。 実務から離れてしばらく経つのでソースはアレかもしれませんが。。 --↓↓↓ここから---------------------------------------- <html> <head> <title>test</title> <script language="JavaScript"> function fncMsgView() { var str = "メッセージです。" document.getElementById("msg").style.display = "block"; document.getElementById("msg").innerHTML = str; } function fncMsgNoView() { document.getElementById("msg").style.display = "none"; } </script> </head> <body> <input type="text" name="hoge" onFocus="javascript:fncMsgView()" onBlur="javascript:fncMsgNoView()"> <div id="msg"></div> <br> ああああああああああああああ<br> いいいいいいいいいいいいいい<br> うううううううううううううう<br> </body> </html> --↑↑↑ここまで---------------------------------------- テキストフィールドをクリック→メッセージ表示 テキストフィールド以外をクリック→メッセージ非表示 になると思います。 ※IE7とFirefox3で確認済みです。 以上、ご参考になれば幸いです。
お礼
hyter様 ご回答ありがとうございます！ ソースまでご提供いただいて… 例えば、ヤフーID登録ページのように複数のフィールドに設定したい場合は、 --↓↓↓ここから---------------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <script language="JavaScript"> function fncMsgView() { var str = "メッセージです。" document.getElementById("msg").style.display = "block"; document.getElementById("msg").innerHTML = str; } function fncMsgNoView() { document.getElementById("msg").style.display = "none"; } function fncMsgView2() { var str = "メッセージです２" document.getElementById("msg2").style.display = "block"; document.getElementById("msg2").innerHTML = str; } function fncMsgNoView2() { document.getElementById("msg2").style.display = "none"; } </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <input type="text" name="hoge" onFocus="javascript:fncMsgView()" onBlur="javascript:fncMsgNoView()"> <div id="msg"></div> <br> ああああああああああああああ<br> いいいいいいいいいいいいいい<br> うううううううううううううう<br> <input type="text" name="hoge" onFocus="javascript:fncMsgView2()" onBlur="javascript:fncMsgNoView2()"> <div id="msg2"></div> <br> ああああああああああああああ<br> いいいいいいいいいいいいいい<br> うううううううううううううう<br> </body> </html> --↑↑↑ここまで---------------------------------------- こういった形で増やしていけばいいのでしょうか？ IE7で動作確認はしたのですが このまま進めていいものかわからなくて… （JSの知識がほとんどないため） 恐れ入りますが教えていただけると幸いです。 よろしくお願いいたします。
お礼
hyter様 ソースサンプル、ありがとうございますm(__)m 非常に勉強になりました。 上のソースを参考にして使わせていただきます。 hyter様本当にありがとうございましたm(__)m