前回の続きです。
https://teratail.com/questions/35898
現在上記タグの技術を使ってアプリケーションを作っています。
テキストボックスにフォーカスが当たった時にボックスを表示させ、
フォーカスが外れるとボックスを非表示にします。
しかし、それだとボックス内のリンクやボタンを押すとボックスが消えてしまうのです。
そこで前回の質問でアドバイスを頂いたとおり、タイムマージンの発想で実装してみました。
ただそれだと次はボックスを非表示にできません。
ボックス外(テキストボックスは除く)をクリックした時にボックスが非表示になるようにしたいのですが、なにかいい方法はないでしょうか?
コードは以下です。
html
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="UTF-8"/> 5 <meta http-equiv="content-language" content="ja"/> 6 <title>TEST</title> 7 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 8 <style> 9 #box{ 10 position: relative; 11 background: aqua; 12 top:20px; 13 width: 300px; 14 border: solid blue; 15 } 16 </style> 17</head> 18<body> 19<input type="text" id="textbox"> 20<div id="box" style="display:none"> 21 <a href="">リンク</a><br> 22 <button type="button">ボタン</button> 23</div> 24 25<script> 26$(function(){ 27 28 // ボックスを表示する 29 $('#textbox').on('focus',function(e){ 30 $('#box').show(); 31 // e.preventDefault(); うまくいかない 32 // return false; うまくいかない 33 }); 34 35 // ボックスを非表示にする 36 var timerId 37 $('#textbox').on('focusout',function(){ 38 timerId = setTimeout(function(){ 39 $('#box').hide(); 40 },1000); 41 }); 42 43 // ボックス内をクリックした際ボックスを非表示にしない 44 $('#box').on('click',function(){ 45 clearTimeout(timerId); 46 }); 47 48 // ボックス外をクリックした際ボックスを非表示にする // うまくいかない 49 $(document).on('click',function(e){ 50 if(!$.contains($('#textbox')[0], e.target) || !$.contains($('#box')[0], e.target)){ 51 $('#box').hide(); 52 } 53 }); 54 55}); 56</script> 57 58</body> 59</html> 60
伝播を止める方法やcontainsを使ったやり方も試しましたが、伝播も止まらずうまくいきませんでした。
もしわかる方がいればお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/24 22:07
2016/05/25 03:18 編集
退会済みユーザー
2016/05/25 01:25
2016/05/25 03:17