- ベストアンサー
表示したレイヤー以外をクリックした時にレイヤーを消す方法
レイヤーを使用して入力補助を作成しようと思っています。 大まかにはできたのですが、 入力補助用のレイヤーを表示したあと、 全然関係ないところをクリックした時に レイヤーを閉じさせたいのですが実装イメージが 分かりません。 動き的には以下のページにあるような形にしてみたいです。 http://javascript.maxux.com/js037.htm 以下のページはdojoを使用しており、 具体的な処理はちょっと追いきれなかったので 考え方を教えていただけたらと思います。 どうぞ宜しくお願い致します。
- veracity
- お礼率71% (25/35)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
よく考えたら、オブジェクトを作ったり削除したりせずに、見せたり隠したりで 十分ですね。 <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>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
こんな感じでやってみては？ <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>
お礼
ありがとうございます。 <form id="f0" onmouseover="f0deleteflg=false" onmouseout="f0deleteflg=true"> この発想が思いつかなかったです。大変スッキリしました。 どうもありがとうございます。