表示したレイヤー以外をクリックした時にレイヤーを消す方法

解決済

質問者：veracity
質問日時：2008/01/24 19:29
回答数：2件

レイヤーを使用して入力補助を作成しようと思っています。
大まかにはできたのですが、
入力補助用のレイヤーを表示したあと、
全然関係ないところをクリックした時に
レイヤーを閉じさせたいのですが実装イメージが
分かりません。

動き的には以下のページにあるような形にしてみたいです。
http://javascript.maxux.com/js037.htm

以下のページはdojoを使用しており、
具体的な処理はちょっと追いきれなかったので
考え方を教えていただけたらと思います。

どうぞ宜しくお願い致します。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2008/01/25 17:14

よく考えたら、オブジェクトを作ったり削除したりせずに、見せたり隠したりで

十分ですね。

<head>
<script type="text/javascript">
window.onload=function(){
f0=document.getElementById("f0");
f0deleteflg=false;
selectedOject=new Object();
document.onmousedown=function(){
if(f0deleteflg) f0.style.display="none";
}
}
function hoge(obj){
selectedOject=obj;
f0.style.display="block";
f0.style.top=obj.offsetTop + 20;
f0.style.left=obj.offsetLeft;
}
</script>
<style type="text/css">
#f0{
display:none;
position:absolute;
z-Index:2;
}
.w150{
width:150px;
}
</style>
</head>
<body>
<form id="f0" onmouseover="f0deleteflg=false" onmouseout="f0deleteflg=true">
<select class="w150" onChange="selectedOject.value=this.value;this.selectedIndex=0;f0.style.display='none'">
<option value="">SELECT ONE</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
</select>
</form>
<form>
<br>
<br>
<br>
<br>
<input class="w150" type="text" onClick="hoge(this)" onKeydown="f0.style.display='none'">
<input class="w150" type="text" onClick="hoge(this)" onKeydown="f0.style.display='none'"><br>
<input class="w150" type="text" onClick="hoge(this)" onKeydown="f0.style.display='none'">
<input class="w150" type="text" onClick="hoge(this)" onKeydown="f0.style.display='none'"><br>
</form>
</body>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

<form id="f0" onmouseover="f0deleteflg=false" onmouseout="f0deleteflg=true">

この発想が思いつかなかったです。大変スッキリしました。
どうもありがとうございます。

通報する

お礼日時：2008/01/29 00:03

No.1

回答者： yambejp
回答日時：2008/01/25 15:57

こんな感じでやってみては？

<head>
<script type="text/javascript">
layerdeleleflg=false;
function hoge(obj){
var div=document.createElement("div");
div.appendChild(document.createTextNode("test"));
div.id="newlayer";
obj.form.appendChild(div);
div.style.top=obj.offsetTop + 20;
div.style.left=obj.offsetLeft;
div.onmouseover=function(){layerdeleleflg=true;}
div.onmouseout=function(){layerdeleleflg=false;}
}
window.onload=function(){
document.onmousedown=function(){
var newlayer=document.getElementById("newlayer");
if(newlayer && !layerdeleleflg) newlayer.parentNode.removeChild(newlayer);
}
}
</script>
<style type="text/css">
#newlayer{
position:absolute;
width:100px;
height:100px;
border:1px solid #000;
background-Color:#ffc0c0;
z-Index:2;
}
</style>
</head>
<body>
<form>
<br>
<br>
<br>
<br>
<input type="text" onClick="hoge(this)"><input type="text" onClick="hoge(this)"><br>
<input type="text" onClick="hoge(this)"><input type="text" onClick="hoge(this)"><br>
</form>
</body>