Google क्रोम: स्क्रॉलबार

Question

के साथ समस्या पर फ़ोकस करें मैं jQuery 1.3.2 का उपयोग कर रहा हूं।

एक फॉर्म में एक इनपुट फ़ील्ड है। इनपुट फ़ील्ड पर क्लिक करने से एक div को ड्रॉपडाउन के रूप में खुलता है। Div में वस्तुओं की एक सूची है। चूंकि सूची का आकार बड़ा है, div में एक लंबवत स्क्रॉलबार है।

बाहर क्लिक करते समय ड्रॉपडाउन को बंद करने के लिए, इनपुट फ़ील्ड पर एक धुंधला ईवेंट होता है।

अब समस्या है:

क्रोम में (2.0.172) जब हम स्क्रॉलबार पर क्लिक करें, इनपुट क्षेत्र फोकस खो देंगे। और अब यदि आप बाहर क्लिक करते हैं, तो ड्रॉपडाउन बंद नहीं होगा (क्योंकि जब आप सोलबार पर क्लिक करते हैं तो इनपुट पहले से ही फोकस हो चुका है)

फ़ायरफ़ॉक्स (3.5), आईई (8), ओपेरा (9.64) में, सफारी() जब हम स्क्रॉलबार पर क्लिक करते हैं तो इनपुट फ़ील्ड फोकस नहीं करेगा। इसलिए जब आप बाहर क्लिक करते हैं (स्क्रॉलबार पर क्लिक करने के बाद) ड्रॉपडाउन बंद हो जाएगा। यह अपेक्षित व्यवहार है।

तो स्क्रॉलबार पर क्लिक होने के बाद क्रोम में, और फिर यदि मैं ड्रॉपडाउन के बाहर क्लिक करता हूं तो बंद नहीं होगा। मैं इस समस्या को क्रोम के साथ कैसे ठीक कर सकता हूं।

Answer 1

इससे पहले भी मुझे ऐसी स्थिति का सामना करना पड़ा और यही वह है जो मैं कर रहा हूं।

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

और इनपुट क्षेत्र पर मैं क्या करेंगे यह

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

} 

तो यह ड्रॉप डाउन बंद हो जाएगा अगर div (यहां तक ​​कि स्क्रॉलबार) के बाहर कहीं भी क्लिक किया। लेकिन मैंने सोचा कि अगर कोई अधिक तार्किक समाधान प्रदान कर सकता है।

Answer 2

क्या आप शायद ड्रॉप डाउन div पर भी धुंधला ईवेंट आग लगा सकते हैं? इस तरह, जब या तो इनपुट या ड्रॉप डाउन फोकस खो देता है, यह गायब हो जाएगा ...

Answer 3

मैं उत्सुक हूँ ...
आप हर ब्राउज़र के पिछले संस्करण का उपयोग कर रहे हैं, क्यों नहीं करते आप इसे क्रोम 4.0.202 में आज़माएं?

Answer 4

ठीक है, मुझे अपने ड्रॉपडाउन नियंत्रण में एक ही समस्या थी। मैंने क्रोम डेवलपर्स से इस मुद्दे से संबंधित पूछा है, उन्होंने कहा है कि यह a bug है जो निकटतम भविष्य में तय नहीं किया जा रहा है क्योंकि "यह कई लोगों द्वारा रिपोर्ट नहीं किया गया है और फिक्स मामूली नहीं है"। तो, चलो सच का सामना करते हैं: यह बग कम से कम एक और साल के लिए रहेगा।

हालांकि, इस विशेष मामले (ड्रॉपडाउन) के लिए एक कामकाज है। चाल है: जब कोई स्क्रॉलबार पर क्लिक करता है तो "माउस डाउन" ईवेंट उस स्क्रॉलबार के मालिक तत्व पर आता है। हम इस तथ्य का उपयोग ध्वज सेट करने के लिए कर सकते हैं और इसे "ऑनब्लर" हैंडलर में देख सकते हैं। यहां स्पष्टीकरण:

<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> 

"ड्रॉपडाउन_व्रैप" 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; 
    } 
} 

यही है। हमें एफएफ के लिए किसी भी हैक की आवश्यकता नहीं है इसलिए ब्राउज़र के लिए एक चेक है।क्रोम में हम स्क्रॉलबार पर क्लिक का पता लगाते हैं, सूची को बंद किए बिना फोकस करने की अनुमति देते हैं और फिर तुरंत इनपुट नियंत्रण पर फ़ोकस को पुनर्स्थापित करते हैं। बेशक, अगर हमारे पास "search_ctrl.onfocus" के लिए कुछ तर्क है तो इसे भी संशोधित किया जाना चाहिए। ध्यान दें कि हमें यह जांचने की आवश्यकता है कि क्या search_ctrl ने डबल क्लिक के साथ परेशानियों को रोकने के लिए ध्यान केंद्रित किया था।

आप अनुमान लगा सकते हैं कि बेहतर विचार ऑनब्लूर ईवेंट को रद्द कर सकता है लेकिन यह क्रोम में काम नहीं करेगा। सुनिश्चित नहीं है कि यह बग या सुविधा है या नहीं।

पीएस "ड्रॉपडाउन_व्रैप" में कोई पैडिंग या सीमा नहीं होनी चाहिए, अन्यथा उपयोगकर्ता इन क्षेत्रों में क्लिक कर सकता है और हम इसे स्क्रॉलबार क्लिक के रूप में देखेंगे।

Answer 5

धुंध का पता लगाने के बजाय, दस्तावेज़ का पता लगाएं। किसी या विंडो पर क्लिक करें और माउस बिंदु को पकड़ें। यह निर्धारित करें कि यह माउस बिंदु मेनू बॉक्स के बाहर है या नहीं। presto, आप पता चला है जब वे बॉक्स के बाहर क्लिक किया!

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 ... 
}); 

जब मैं:

#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

मुझे ये जवाब काम नहीं मिल सका, शायद क्योंकि वे 200 9 से हैं। मैंने बस इसके साथ निपटाया, मुझे लगता है कि ihsoft सही ट्रैक पर है लेकिन थोड़ा भारी हाथ है। कार्यों

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

चाल

दो के साथ कैसे आप तत्वों के लिए बाध्य है। ऑन-हाउसडाउन ईवेंट "कंटेनर" div पर होना चाहिए जिसमें क्लिक किया जाएगा सब कुछ शामिल होगा (यानी, टेक्स्ट बॉक्स, ड्रॉपडाउन तीर, और ड्रॉपडाउन बॉक्स और इसकी स्क्रॉल बार)। ब्लर इवेंट (या jQuery फोकसआउट इवेंट में) सीधे टेक्स्टबॉक्स पर बाध्य होना चाहिए।

परीक्षण और काम करता है!