☰

jQuery: blur() イベントの前に click() を実行する 質問する

tag-icon • tag-icon jquery click onblur
jQuery: blur() イベントの前に click() を実行する 質問する

入力フィールドがあり、オートコンプリートの提案をしようとしています。コードは次のようになります。

<input type="text" id="myinput">
<div id="myresults"></div>

入力のblur()イベントで結果の div を非表示にします。

$("#myinput").live('blur',function(){
     $("#myresults").hide();
});

入力に何かを書き込むと、サーバーにリクエストを送信して JSON 応答を取得し、それを ul->li 構造に解析して、この ul を div に配置します#myresults。

この解析されたli要素をクリックすると、liから入力に値を設定し、#myresultsdivを非表示にします

$("#myresults ul li").live('click',function(){
     $("#myinput").val($(this).html());
     $("#myresults").hide();
});

すべて順調に進んでいますが、li をクリックすると、blur()前にイベントが発生しclick()、入力の値が li の HTML を取得しません。

click()事前にイベントを設定するにはどうすればいいですかblur()?

ベストアンサー1

解決策1

mousedownの代わりに を聞いてくださいclick。

マウス ボタンを押すと、およびイベントmousedownがblur次々に発生しますが、マウス ボタンclickを放したときにのみ発生します。

解決策2

preventDefault()ドロップダウンがフォーカスを奪うことをブロックできますmousedown。わずかな利点は、マウス ボタンを放すと値が選択されることです。これは、ネイティブの選択コンポーネントの動作方法です。JSFiddle

$('input').on('focus', function() {
    $('ul').show();
}).on('blur', function() {
    $('ul').hide();
});

$('ul').on('mousedown', function(event) {
    event.preventDefault();
}).on('click', 'li', function() {
    $('input').val(this.textContent).blur();
});

おすすめ記事