Google Chrome：スクロールバーのフォーカス問題

Question

jQuery 1.3.2を使用しています。

フォームに入力フィールドがあります。 入力フィールドをクリックすると、divがドロップダウンとして開きます。 divにはアイテムのリストが含まれています。リストのサイズが大きいので、divには垂直スクロールバーがあります。

クリックしたときにドロップダウンを閉じるには、入力フィールドにぼかしイベントがあります。

今の問題がある：私たちはスクロールバーをクリックするとChromeで

（2.0.172）、入力フィールドがフォーカスを失うことになります。 外部をクリックすると、ドロップダウンが閉じない（スクロールバーをクリックしたときに入力がすでにフォーカスを失っているため）

Firefox（3.5）、IE（8）、opera Safari（）スクロールバーをクリックすると、入力フィールドはフォーカスを失いません。したがって、（スクロールバーをクリックした後で）外側をクリックすると、ドロップダウンが閉じます。これは予想される動作です。

だから、クロムで一度スクロールバーをクリックして、次にクリックして外にドロップダウンしないでください。 この問題をChromeで解決するにはどうすればよいですか。

Answer 1

私はこのような状況に直面しており、これは私がやっていることです。

$('html').click(function() { 
    hasFocus = 0; 
    hideResults(); 
}); 

と入力フィールド上の私は、DIV（でもスクロールバー）以外の場所をクリックしたのであれば、これは、ドロップダウンを閉じます。この

$('input').click() 
{ 
    event.stopPropagation(); 

} 

を行います。 しかし、誰かがより論理的な解決策を提供できるかどうかは分かりました。

Answer 2

ドロップダウン・ディビジョンでもぼかしイベントが発生するように設定できますか？入力またはのいずれかをドロップダウンがフォーカスを失ったときに、この方法では、それはあなたがすべてのブラウザの最新バージョンを使用している
私は好奇心が強い

Answer 3

... ...消えるだろう、なぜありませんあなたはクロム4.0.202でそれを試してみませんか？

Answer 4

私のドロップダウンコントロールでも同じ問題がありました。私はこの問題についてChrome開発者に尋ねましたが、彼らは "これは多くの人には報告されておらず、修正が簡単ではないため、近い将来に修正されないa bugだと言いました。だから、真実に直面しましょう：このバグは、少なくとももう1年間は残ります。

この特定のケース（ドロップダウン）では回避策がありますが、トリックは、スクロールバーを1回クリックすると、「マウスダウン」イベントがそのスクロールバーのowner要素に来る。この事実を利用してフラグを設定し、 "onblur"ハンドラでチェックすることができます。ここでの説明：

<input id="search_ctrl"> 
<div id="dropdown_wrap" style="overflow:auto;max-height:30px"> 
    <div id="dropdown_rows"> 
    <span>row 1</span> 
    <span>row 2</span> 
    <span>row 2</span> 
    </div> 
</div> 

"dropdown_wrap" divは内容が固定高さに収まらないため、垂直スクロールバーを取得します。クリックを取得すると、スクロールバーがクリックされ、フォーカスが離されることが確実になります。ここでいくつかのコードを処理する方法：

search_ctrl.onfocus = function() { 
    search_has_focus = true 
} 

search_ctrl.onblur = function() { 
    search_has_focus = false 
    if (!keep_focus) { 
    // hide dropdown 
    } else { 
    keep_focus = false; 
    search_ctrl.focus(); 
    } 
} 

dropdow_wrap.onclick = function() { 
    if (isChrome()) { 
    keep_focus = search_has_focus; 
    } 
} 

それです。 FF用のハックは必要ありませんので、ブラウザのチェックがあります。クロムでは、スクロールバーのクリックを検出し、リストを閉じることなくフォーカスをぼかし、すぐにフォーカスを入力コントロールに戻します。もちろん、「search_ctrl.onfocus」のロジックがある場合は、同様に変更する必要があります。ダブルクリックによるトラブルを防ぐため、search_ctrlにフォーカスがあったかどうかを確認する必要があります。

あなたは良いアイデアがのonblurイベントをキャンセルすることができることを推測することがありますが、これはChromeで動作しません。これがバグか機能か分からない

P.S. "dropdown_wrap"にはパディングや枠線がありません。そうでなければ、ユーザーはこの領域をクリックすることができ、スクロールバーのクリックとして扱います。

Answer 5

代わりのボケを検出し、document.bodyまたはウィンドウクリックを検出し、マウスポイントをつかみます。このマウスポイントがメニューボックスの外側にあるかどうかを判定します。あなたが箱の外をクリックした時を検出しました！

Answer 6

私は、次の手順を実行して、これを解決：その後、CSSルール

$('#my_container') 
    .mouseenter(function(){ 
    // alert('ctr in!'); 
    mouse_in_container = true; 
    }) 

    .mouseleave(function(){ 
    // alert('ctr out!'); 
    mouse_in_container = false; 
    }); 

そして：

$('input').blur(function(){ 
    if(mouse_in_container) 
    return; 
    ... Normal code for blur event ... 
}); 

I：

#my_containerは、 "自動オーバーフロー" を持っているコンテナです

 (>> ADDED THIS) mouse_in_container=false; 
     $('input').attr('active', false); // to blur input 
     $('#my_container').hide(); 

：ドロップダウンで要素を選択し、私はコードを書き換えます

Answer 7

私は同じ状況/問題に直面していました。私は "ihsoft"のソリューションをテストしましたが、いくつか問題があります。だから、私はそれに代わるものに取り組み、 "ihsoft"に似ているが動作するものを作った。ここに私の解決策があります：

var hide_dropdownlist=true; 

search_ctrl.onblur = function() { 

    search_has_focus = false 
    if (hide_dropdownlist) { 
    // hide dropdown 
    } else { 
    hide_dropdownlist = true; 
    search_ctrl.focus(); 
    } 
} 

dropdow_wrap.onmouseover = function() { 
    hide_dropdownlist=false; 
} 
dropdow_wrap.onmouseoout = function() { 
    hide_dropdownlist=true; 
} 

私はこれが誰かを助けることを望みます。

Answer 8

私は、彼らが2009年から、私はちょうどこの扱われるかもしれないので、これらの答えを動作させることができなかった、私はihsoftは正しい軌道に乗っていると思いますが、左利き少し重いです。

2で機能

onMouseDown() { 
    lastClickWasDropdown=true; 
} 
onBlur() { 
    if (lastClickWasDropdown) { 
     lastClickWasDropdown = false; 
     box.focus(); 
    } else { 
     box.close(); 
    } 
} 

トリックは、あなたが要素をバインドする方法です。 onMouseDownイベントは、クリックされるすべての要素（つまり、テキストボックス、ドロップダウン矢印、ドロップダウンボックス、およびそのスクロールバー）を含む "container" divになければなりません。 Blurイベント（またはjQueryのfocusoutイベント）は、テキストボックスに直接バインドする必要があります。

テストおよび作品！