257

入力フィールドがフォーカスを取得した場合にコンテナを表示しようとしていますが、実際の問題は、フォーカスが失われた場合にコンテナを非表示にすることです。jQueryの焦点とは反対のイベントはありますか？

いくつかのサンプルコード：

<input type="text" value="" name="filter" id="filter"/>

<div id="options">some cool options</div>

<script type="text/javascript">
  $('#options').hide();

  $('#filter').focus(function() {
    $('#options').appear();
  });
</script>

そして、私がやりたいのは次のようなものです。

$('#filter').focus_lost(function() {
  $('#options').hide();
});
4

5 に答える 5

428

要素がフォーカスを失ったときに関数を呼び出すには、blurイベントを使用します。

$('#filter').blur(function() {
  $('#options').hide();
});
于 2009-09-14T19:54:50.260 に答える
43

このような：

$(selector).focusout(function () {
    //Your Code
});
于 2011-01-27T17:50:46.967 に答える
33

「blur」を使用する：http： //docs.jquery.com/Events/blur#fn

于 2009-09-14T19:56:06.780 に答える
13

ぼかしイベント：要素がフォーカスを失ったとき。

focusoutイベント：要素またはその中の要素がフォーカスを失ったとき。

フィルタ要素の内部には何もないため、この場合、ぼかしとフォーカスアウトの両方が機能します。

$(function() {
  $('#filter').blur(function() {
    $('#options').hide();
  });
})

ぼかしのあるjsfiddle：http: //jsfiddle.net/yznhb8pc/

$(function() {
  $('#filter').focusout(function() {
    $('#options').hide();
  });
})

フォーカスアウト付きのjsfiddle：http: //jsfiddle.net/yznhb8pc/1/

于 2015-01-30T01:04:40.700 に答える
0

フィールドがフォーカスされる前に「クールオプション」がビューから非表示になっている場合は、これをDOMに含めるのではなく、JQueryで作成して、スクリーンリーダーを使用している人に不要な情報が表示されないようにします。私たちがそれを見る必要がないのに、なぜ彼らはそれを聞かなければならないのですか？

したがって、次のように変数を設定できます。

var $coolOptions= $("<div id='options'></div>").text("Some cool options");

次に、フォーカスに追加（または追加）します

$("input[name='input_name']").focus(function() {
    $(this).append($coolOptions);
});

フォーカスが終了したら削除します

$("input[name='input_name']").focusout(function() {
    $('#options').remove();
});
于 2016-07-27T08:03:57.270 に答える