次のコードを使用して、入力フィールドがフォーカス/ぼかしされているときに非表示のdivを表示/非表示にすることができます。
$('#example').focus(function() {
$('div.example').css('display','block');
}).blur(function() {
$('div.example').fadeOut('medium');
});
問題は、ユーザーが対話しているときにdiv.example
が引き続き表示されるようにすることですwithinこのdiv。例えば。 div.example
内のテキストをクリックするかハイライト表示します。ただし、div.example
は、入力にフォーカスがなく、マウスがdiv内の要素と対話している場合は常にフェードアウトします。
Input要素とdiv要素のHTMLコードは次のとおりです。
<p>
<label for="example">Text:</label>
<input id="example" name="example" type="text" maxlength="100" />
<div class="example">Some text...<br /><br />More text...</div>
</p>
ユーザーが入力またはdiv.example
の外側をクリックしたときにのみdiv.example
が消えるようにするにはどうすればよいですか? focusin/focusoutを試して<p>
へのフォーカスを確認しようとしましたが、それも機能しませんでした。
div.example
がjQueryを使用して入力フィールド#exampleのすぐ下に配置されていることが重要ですか?これを行うコードは次のとおりです。
var fieldExample = $('#example');
$('div.example').css("position","absolute");
$('div.example').css("left", fieldExample.offset().left);
$('div.example').css("top", fieldExample.offset().top + fieldExample.outerHeight());
これが以前に尋ねられた場合は申し訳ありませんが、私が読んだ多くのdivの表示/非表示の質問はこれをカバーしていません。アドバイスありがとうございます。 :)
Focusinがバブルした後でドキュメントのfocusinイベントを追跡すると、フォーカスされている新しいものが「外側」にあるかどうかを把握でき、そうである場合は何かについて行うことができます。これは、クリックとタブの両方で機能します。
$('#example').focus(function() {
var div = $('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, #example').length) return;
$(document).unbind('.example');
div.fadeOut('medium');
});
});
$('div.example').hide();
Focusinイベントとclickイベントの両方を使用してdiv.exampleを非表示にするかどうかを決定するようにコードを更新しました。名前空間イベントを使用しているので、unbind( '。example')を呼び出して、両方のイベントをバインド解除できます。
例: http://jsfiddle.net/9XmVT/11/
サイドノートcssポジショニングコードを変更して、cssメソッドを1回だけ呼び出すようにします。
$('div.example').css({
"position":"absolute",
"left": fieldExample.offset().left,
"top": fieldExample.offset().top + fieldExample.outerHeight()
});
絶対位置のdivを使用した例: http://jsfiddle.net/9XmVT/14/
[〜#〜]更新[〜#〜]
ベンアルマンはクリックアウトサイドイベントを更新し、多くの*アウトサイドイベントを処理するように変換しました。 http://benalman.com/projects/jquery-outside-events-plugin/
あなたはこのようなことをさせましょう:
$('#example').focus(function() {
$('div.example').show().bind('focusoutside clickoutside',function(e) {
$(this).unbind('focusoutside clickoutside').fadeOut('medium');
});
});
$('div.example').hide();
http://jsfiddle.net/9XmVT/699/
iframeでonclick中に死亡
タイマーを使用してわずかな遅延を導入し、フィールドにフォーカスがある場合やdivをクリックする場合はタイマーを停止できます。
var timer = false ;
$('#example').focus(function() {
if (timer)
clearTimeout(timer);
$('div.example').css('display','block');
}).blur(function() {
if (timer)
clearTimeout(timer);
timer = setTimeout(function(){
$('div.example').fadeOut('medium');
},500);
});
$('div.example').click(function(){
if (timer)
clearTimeout(timer);
})