現在上記タグの技術を使って、アプリ開発を行っています。
仕様は以下です。
・テキストボックスがあり、
そこにフォーカスが当たると、
非表示にしていたボックスが表示される。
・そのボックス内には、ボタンやリンクといった押下する項目がある。
・テキストボックスからフォーカスが外れるとボックスを非表示にする
javascriptのfocus,focusoutを使って実装しました。
が、以下の点に詰まりました。
表示されたボックス内のボタンやリンクを押下するとfocusoutイベントが発火し、ボックスが非表示になってしまうのです。
これを非表示にしない方法はないでしょうか?
ボックス外をクリックした際は、ボックスを非表示にしたいのですが、
ボックス内をクリックした際はボックスを表示したままにしたいのです。
focusoutには別にこだわっていないので、何かいい方法や別のやり方を知っていらっしゃる方がいれば教えていただきたいです。
追記
画面イメージ
コードは以下です。
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.shtml">リンク</a><br> 22 <button type="button">ボタン</button> 23</div> 24<script> 25$(function(){ 26 27 // ボックスを表示する 28 $('#textbox').on('focus',function(){ 29 $('#box').show(); 30 }); 31 32 // ボックスを非表示にする 33 $('#textbox').on('focusout',function(){ 34 $('#box').hide(); 35 }); 36}); 37</script> 38</body> 39</html> 40
追記2
タイムマージンを使った方法
htnl
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(){ 30 $('#box').show(); 31 }); 32 33 // ボックスを非表示にする 34 var timerId 35 $('#textbox').on('focusout',function(){ 36 timerId = setTimeout(function(){ 37 $('#box').hide(); 38 },1000); 39 }); 40 41 // ボックス内をクリックした際ボックスを非表示にしない 42 $('#box').on('click',function(){ 43 clearTimeout(timerId); 44 }); 45}); 46</script> 47 48</body> 49</html>
回答1件
あなたの回答
tips
プレビュー