ヤフーID登録フォームのようにテキストフィールドクリックでメッセージ表示させたい

解決済

質問者：webweb555
質問日時：2008/10/27 11:36
回答数：2件

https://edit.yahoo.co.jp/config/eval_register?.s …
↑
ヤフーＩＤの登録フォームでは
テキストフィールドをクリックすると
その下に項目ごとにメッセージ（ヘルプ）が表示されます。

別のテキストフィールドをクリックしたり、
他の場所をクリックすると、メッセージは非表示になります。

メッセージが出てくるとき、
パッと出るのではなく、アニメーションのように表示されます。

これと全く同じことをしたいのですが、
JavaScriptなどを利用しているのでしょうか？

実現方法をご存知の方、教えていただけますと幸いです。

どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： hyter
回答日時：2008/10/27 13:53

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で確認済みです。

以上、ご参考になれば幸いです。

- 0
- 件

通報する

この回答へのお礼

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の知識がほとんどないため）

恐れ入りますが教えていただけると幸いです。

よろしくお願いいたします。

通報する

お礼日時：2008/10/29 22:20

No.2ベストアンサー

回答者： hyter
回答日時：2008/10/30 18:50

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"]にて非表示としています。

ほかにもっと良い方法があるかもしれませんが、、

以上、ご参考になれば幸いです。