2

<input>それに焦点を合わせると、提案ドロップダウンが表示されることがあります。他のものがクリックされると、提案は消えます。<div>問題は、提案がクリックされたときにブラーイベントが実行されないようにすることができないように見えることです。

HTMLの一部を次に示します。

<label id="testTagsLabel">Tags:</label>
<input type="text" name="tags" id="testTags" placeholder="Ex: Poem, Edgar Allen Poe">
<div id="tagSuggest">
<ul>
<li class="tagSuggestTag">testtag</li>
<li class="tagSuggestTag">testtag2</li>
<li class="tagSuggestTag">testtag3</li>
<li class="tagSuggestTag">testtag4</li>
</ul>
</div>

JavaScriptの一部を次に示します。

  $('#testTags').focus(
     function(){
        $('#tagSuggest').show();
     });

  $('#testTags').blur(
     function(){
        $('#tagSuggest').hide();
     });
4

2 に答える 2

4

次のようなものを試してください：

$("#yourinput").blur(function(e) {
    if(!$(e.target).is(".suggestDiv")) {
        // close the suggest div
    }
});

更新:(おっと、上記のコードは思ったように機能しません）

これは機能するはずです：

$(document).click(function(e) {
    if (!$(e.target).is("#suggest")) {
        $("#suggest").hide();
    }
});

デモ： http： //jsfiddle.net/PNVCL/

UPDATE2：

タブを押して別の入力に切り替えるときに提案divを非表示にしたいので、まだぼかしが必要であることを忘れました。更新されたデモは次のとおりです：http：//jsfiddle.net/PNVCL/1/

どこかをクリックしても、提案divが閉じられ（提案div自体または入力を除く）、タブを押して別の入力に切り替えます。まだ改善が必要ですが、ここからピックアップできるはずです。

于 2011-04-02T22:51:14.413 に答える
2

提案ボックスのクリックによるぼかしと別のぼかし (タブ、ウィンドウのぼかし、右クリックなど) を区別することは不可能であるため、blur イベントは使用しないでください。

@dakis が提供する回避策は、ドキュメントでクリック イベントを使用し、提案ボックスを使用してボックスを閉じることです。ドキュメント クリック ハンドラーを動的に追加および削除して、オーバーヘッドを回避し、ユーザーがボックスを閉じずにフィールドをクリックできるようにすることをお勧めします。

デモはこちら: http://jsfiddle.net/fvwPn/

さらに、TABを押すとボックスが閉じるようにしました。また、blur イベントを使用するダーティー ハック バージョン (コメント済み) と、タイムアウトを使用する大きなハックを追加しました (2 つのイベントは個別に発生するため、遅延はクライアント ブラウザーと速度に依存します... そう、ダーティー ハックです)。

于 2011-04-02T23:33:27.710 に答える