（１）イベントハンドリングの確認
まだ続きます。
【詳細】
（１）イベントハンドリングの確認
テキストボックスにフォーカスが当たったらDIV要素を表示、blurしたらDIV要素を消します。
DIV要素を動的に作ります。
【恥ずかしながらハマった点】
input要素にappendChildしても表示されない（分かってみれば当たり前）のでハマりました。
ディレクトリ構造は変更なしです。
WebContent
- js/prototype.js
- js/my.js
- a.html
- my.css
■my.js
// 外出しです。
var div1 = null;
Event.observe(window, 'load', function(event) {
// onFocus イベントを登録します。
Event.observe('hoge', 'focus', function(event) {
if (div1) {
// div1がnullでなければvisibleにします。
div1.style.visibility = "visible";
} else {
// nullの場合はエレメントを作成して<div id="candidate"></div>に
// appendします。
div1 = new Element('div', {'id' : 'div1' });
div1.innerHTML = "HOGE!";
div1.style.backgroundColor = "#FF0000";
div1.style.width = "100px";
$('candidate').appendChild(div1);
}
});
// onBlur イベントを登録します。
Event.observe('hoge', 'blur', function(event) {
if (div1) {
// div1がnullでない場合はhiddenにします。
div1.style.visibility = "hidden";
}
});
});
■my.css
@CHARSET "UTF-8";
/* CSSは表示と関係ありません */
#div1 {
visibility:hidden;
}
■a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/my.js"></script>
<script type="text/css" src="my.css"></script>
<script type="text/javascript">
</script>
<title>Ajax tutorial - a</title>
</head>
<body>
<input type="text" id="hoge" name="hoge" />
<div id="candidate" />
</body>
</html>
.
0 件のコメント:
コメントを投稿