2013-10-08 12 views
10

मोबाइल ब्राउज़र (0 आईओएस सफारी और क्रोम पर परीक्षण) में एक पाठ input पर ध्यान देने पर, टेक्स्ट कैरेट किसी भी div एस के शीर्ष पर दिखाई देता है ।मोबाइल ब्राउज़र में अन्य तत्वों के ऊपर टेक्स्ट सम्मिलन कर्सर (कैरेट) दिखाई देता है

enter image description here

क्या इस के आसपास काम कर का सबसे अच्छा तरीका होगा: http://jsfiddle.net/XQf8N/

यहाँ प्रभाव का एक स्क्रीनशॉट है:

यहां एक त्वरित, सरल उदाहरण है?

मैंने यहां जवाब देने की कोशिश की: JQuery Mobile: focused input text doesn't respect z-index, appearing above everything else लेकिन यह काम नहीं किया।

अद्यतन कुछ और खुदाई मैं भी जब मेनू div टॉगल लेकिन है कि या तो मोबाइल डिवाइस पर काम करने के लिए प्रतीत नहीं होता $("input").blur(); करने की कोशिश की है, यह ध्यान देने के डेस्कटॉप पर हालांकि निकालता है के बाद।

अद्यतन 2 इस से संबंधित हो सकता: iPad Safari does not fire blur event है, हालांकि अगर मैं एक setTimeout में पाठ बॉक्स को धुंधला, घटना श्रोता में, पाठ बॉक्स सफलतापूर्वक को धुंधला नहीं है। इस बेला देखें: http://jsfiddle.net/XQf8N/17/

अद्यतन 3 एक छिपे हुए पाठ बॉक्स के लिए इनपुट पारित करने के लिए कोशिश कर रहा है काम करने के लिए या तो http://jsfiddle.net/XQf8N/23/

अद्यतन 4 एहसास के रूप में सुझाव मैं कर्सर छुपा पर गौर नहीं किया प्रतीत नहीं होता है - http://jsfiddle.net/XQf8N/24/ - यह सिर्फ जब पाठ बॉक्स पर मँडरा माउस सूचक को छुपाता है, पाठ बॉक्स को निष्क्रिय करने, इस फोकस खोना नहीं करता

अद्यतन 5 सुझाव कैरट के लिए कुछ भी नहीं है और कीबोर्ड को बंद नहीं करता है http://jsfiddle.net/XQf8N/27/

अद्यतन 6 यह समाधान: https://stackoverflow.com/a/7761438/1061602 घटना श्रोता के भीतर काम नहीं करता है, को देखने के बेला: http://jsfiddle.net/XQf8N/29/

अद्यतन 7 यह समाधान: https://stackoverflow.com/a/6473076/1061602 या तो काम नहीं करता है, पाठ बॉक्स

अक्षम करने के रूप में एक ही परिणाम

अद्यतन 8 एक समारोह है कि नॉकआउट का उपयोग कर बाध्य भीतर पाठ बॉक्स को धुंधला काम करता है: http://jsfiddle.net/XQf8N/33/

कोई भी विचार मूल घटना श्रोता के साथ क्या गलत है? उम्मीद है कि यह समस्या निवारण किसी के लिए उपयोगी होगा यदि उनके पास एक ही समस्या है।

+0

शायद सीएसएस में कर्सर बदल रहा है। (http://www.w3schools.com/cssref/pr_class_cursor.asp) – mparryy

+1

'.blur()' को फायर करने के बजाय, जब उपयोगकर्ता मेनू पर क्लिक करता है तो 'focus()' आग क्यों नहीं? –

+0

अच्छा सुझाव, लेकिन यह काम नहीं करता –

उत्तर

1

ठीक है, यकीन नहीं क्या बेला के साथ हुआ है, लेकिन यह एक काम करता है: http://jsfiddle.net/XQf8N/33/

यह वही है मैन्युअल रूप से घटनाओं के लिए सुनने के लिए और फिर पाठ बॉक्स पर blur() कॉल करने के बजाय छोड़कर, blur() निकाल दिया जाता है एक दस्तक बाध्यकारी से।

जैसा कि मैं नॉकआउट का उपयोग कर रहा हूं, मैं इसके बजाय नॉकआउट ईवेंट बाध्यकारी में टेक्स्टबॉक्स को भी धुंधला कर सकता हूं।

+0

मैं नॉकआउट का उपयोग नहीं कर रहा हूं और मुझे धुंध के साथ इसे हल करने का कोई तरीका नहीं मिल रहा है। यह टिनिमस कंटेनर –

+0

पर है यह एक पूर्ण दुःस्वप्न है। क्षमा करें कि मेरा समाधान मदद नहीं कर सका। अन्य ढांचे/पुस्तकालय हैं जो बाध्यकारी का उपयोग करते हैं, जैसे कि कोणीय, मुझे लगता है कि एक समान दृष्टिकोण वहां काम कर सकता है। –

0

मेनू खोलने के ठीक बाद आपको इस कोड को document.activeElement.blur(); निष्पादित करने का प्रयास करना चाहिए।

0

मैं अपने समाधान के लिए visibility: hidden; का उपयोग करने में सक्षम था।

संबंधित मुद्दे