इनपुट

Question

पर ध्यान केंद्रित करते समय आईओएस में अनदेखा फिक्स्ड/पूर्ण पोजीशनिंग मैं फोनगैप के साथ एक ऐप बना रहा हूं और मेरे पास एक हेडर है जिसे मैंने व्यूपोर्ट के शीर्ष पर तय किया है।

header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 30px; 
    background-color: red; 
    z-index: 100; 
} 

यह काम करता है जब मैं एक इनपुट फ़ील्ड टैप करता हूं और कीबोर्ड स्लाइड करता है। फिर स्थिति पूरी तरह से त्याग दिया जाता है। हेडर दृश्यमान दृश्य के बाहर ऊपर फिसल गया है। कीबोर्ड फिर से बंद करने के बाद यह अपनी जगह पर वापस आ जाता है।

मैंने पढ़ा है कि कुछ मोबाइल ब्राउज़र को यह सुनिश्चित करने के लिए निश्चित और पूर्ण स्थान की परवाह नहीं है कि संभवतः एक छोटी सी स्क्रीन एक निश्चित तत्व से ढकी न हो। क्या ये सच है?

क्या इसके आसपास कोई रास्ता है?

मैंने इनपुट पर केंद्रित होने पर शीर्षलेख को पूर्ण करने की कोशिश की है। मैंने इसके बारे में यहां पढ़ा, http://dansajin.com/2012/12/07/fix-position-fixed/। हालांकि, यह मेरे लिए काम नहीं कर रहा प्रतीत होता है।

किसी भी मदद के लिए धन्यवाद। चीयर्स

Answer 1

आईएसओ के लिए निश्चित स्थिति के फोनगैप का कार्यान्वयन वर्चुअल कीबोर्ड की बात आती है। मैंने आपके द्वारा लिंक किए गए कई प्रस्तावों का प्रयास किया है, लेकिन उनमें से कोई भी संतोषजनक ढंग से काम नहीं करता है। कीबोर्डश्रिंक व्यू को अक्षम करने से इनपुट फ़ील्ड कीबोर्ड के नीचे छिपी हो सकती है।

मैं इस वर्कअराउंड के साथ जा रहा हूं, जो कुंजीपटल दृश्य में स्लाइड करते समय निश्चित हेडर को छुपाता है और कुंजीपटल स्लाइड देखने के बाद इसे फिर से दिखाता है। मैं एक और पूर्ण फिक्स का इंतजार कर रहा हूं, लेकिन इस समाधान के पास स्वच्छ और भरोसेमंद होने का लाभ है। शो() पर 10 एमएस देरी हेडर को गलत जगह पर फ्लैश करने से रोकने के लिए पर्याप्त है जबकि कीबोर्ड नीचे स्लाइडिंग कर रहा है। छिपाने पर 20 एमएस देरी() हेडर को गलत जगह पर पॉप-अप करने से रोकती है यदि उपयोगकर्ता सीधे एक इनपुट फ़ील्ड से अगले तक जाता है।

$(document).on('focus','input, textarea, select',function() { 
    setTimeout(function() { 
     $('header').hide(); 
    },20); 
}); 
$(document).on('blur','input, textarea, select',function() { 
    setTimeout(function() { 
     $('header').show(); 
    },10); 
});