web-dev-qa-db-ja.com

jQuery：フォーム入力フォーカスで、divを表示します。ぼかしでdivを非表示にする（警告付き）

次のコードを使用して、入力フィールドがフォーカス/ぼかしされているときに非表示の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の表示/非表示の質問はこれをカバーしていません。アドバイスありがとうございます。 :)

jqueryfocusblur
19
Lyon

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();
29
PetersenDidIt

http://jsfiddle.net/9XmVT/699/

iframeでonclick中に死亡

2
TomSawyer

タイマーを使用してわずかな遅延を導入し、フィールドにフォーカスがある場合や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);
})
1
Ben