एंड्रॉइड एचटीएमएल 5 - सॉफ्ट कीबोर्ड इनपुट क्षेत्र ओवरलैप करता है

Question

मैं एंड्रॉइड पर सॉफ्ट कीबोर्ड द्वारा ओवरलैपिंग इनपुट फ़ील्ड के समाधान के लिए थोड़ा थका हुआ हूं। मेरी समस्या इस से बहुत ही परिचित है: Soft Keyboard Overlapping with EditText Field हालांकि इस मामले में यह HTML5 में होता है, मूल आवेदन नहीं।

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

मेरे ग्राहक इस व्यवहार पसंद नहीं है ... यह Galaxy Tab 10 पर "यकीन है कि के लिए होता है - एंड्रॉयड 4.0.3, लेनोवो गोली -। एंड्रॉयड 3.1

मैं इनपुट की ऊंचाई की स्थापना, box-sizing:border-box; उपयोग करने की कोशिश की है, -webkit-appearance: textfield;, -webkit-user-select: text;, -webkit-writing-mode: horizontal-tb;, -webkit-rtl-ordering: logical; और कुछ और, लेकिन कुछ भी काम किया।

आप किसी भी विचार आया है? मैं सीएसएस समाधान पसंद करेंगे, जावास्क्रिप्ट पेज स्क्रॉल इस मामले (ग्राहकों की आवश्यकताओं) में मेरे लिए एक जवाब नहीं है।

शायद यह जू है इनपुट एंड्रॉइड की कुछ स्टाइल के कारण कोई वर्कअराउंड या कुछ विशिष्ट समस्या के साथ एक एंड्रॉइड वेब ब्राउज़र बग है (मैंने पहले से ही सभी position: absolute गुणों को हटाने का प्रयास किया है)?

सभी सुझावों का स्वागत है।

Answer 1

इस एंड्रॉइड गंदा को हल करने का सबसे आसान तरीका (और अब आईओएस 7 में) इनपुट फोकस और ब्लर इवेंट्स का उपयोग करना है। यदि आप पाद लेख टैग का उपयोग नहीं कर रहे हैं तो इसे अपने पाद लेख तत्व के साथ बदलें।

jQuery में:

$("input").focus(function(){ 
    $('footer').hide(); 
}); 

$("input").blur(function(){ 
    $('footer').show(); 
}); 

Answer 2

मैं इस कष्टप्रद मुद्दा, मेरे सीएसएस ढांचे से संबंधित था - मोबाइल-कोणीय-ui। तो यह इंटरनेट पर बग ज्ञात है, और मैंने वेब पर फिक्स खोजने के लिए घंटों बिताए, लेकिन दुर्भाग्यवश प्रस्तावित समाधानों में से कोई भी मेरे विशेष मामले को हल नहीं कर पाया। आखिर में मैंने कुछ परीक्षण किया, और यह पता चला कि यह व्यवहार मेरे द्वारा उपयोग किए गए ढांचे के कारण होता है। (मैंने इसे मोबाइल-कोणीय-ui लेखकों को रिपोर्ट किया था, लेकिन मुझे प्रतिक्रिया नहीं मिली।) आप शायद कुछ परीक्षण करना चाहते हैं, जैसा कि मैंने किया था, यह पता लगाने के लिए कि क्या यह समस्या आपके ऐप के आर्किटेक्चर से संबंधित है, वास्तव में। सभी सीएसएस कोड पर टिप्पणी करें और रिक्त, शुद्ध एचटीएमएल पेज से फॉर्म पर शुरू करें। यदि सभी का ठीक है (फॉर्म को सॉफ्ट कीबोर्ड के ऊपर दृश्य के दृश्य भाग में दिखाने के लिए स्क्रॉल करना चाहिए) जब आपका सीएसएस टिप्पणी/बंद हो जाता है, तो आपकी समस्या सीएसएस में होती है, बस मेरे मामले में। जो लोग अपने ऐप्लिकेशन में मोबाइल-कोणीय-ui उपयोग करते हैं, और इस मुद्दे में मिल के लिए, कोड के इस टुकड़े मेरे लिए काम किया है:

html { 
    overflow: auto; 
} 
body { 
    height:auto; 
    overflow: auto; 
} 
.scrollable { 
    position:inherit; 
} 

बाकी अपने विशेष मामले पर निर्भर करता है।

मुझे उम्मीद है कि इससे मदद मिलती है।