2012-11-03 11 views
5

आईओएस में, position: fixed के साथ एक div में निहित टेक्स्टरेस के लिए, जब कोई टेक्स्टरी फोकस करता है, तो ओएस सुनिश्चित करता है कि यह दिखाई दे रहा है (जो कभी-कभी संपूर्ण ब्राउज़र विंडो को स्लाइड करने का मतलब है) ताकि कीबोर्ड द्वारा textarea छुपा नहीं है।कीबोर्ड द्वारा छिपाए गए एंड्रॉइड ब्राउज़र में टेक्स्टरेरा

एंड्रॉइड ब्राउज़र में (मैंने 2.3 और 4.0 दोनों के साथ-साथ Chrome में 4.0 में स्टॉक ब्राउज़र का परीक्षण किया है), ऐसा नहीं होता है। टेक्स्टरेरा कीबोर्ड द्वारा कवर किया जाता है, और उपयोगकर्ता नहीं देख सकता कि वह क्या टाइप कर रही है।

केवल एंड्रॉइड के लिए अस्थायी कामकाज के रूप में, मैंने position: fixed को textarea:focus पर सेट किया है और इसे स्क्रीन के शीर्ष पर ले जाएं ताकि यह दिखाई दे सके।

क्या कोई और सुरुचिपूर्ण समाधान है जो मेरे लेआउट की अखंडता को बनाए रखता है?

मैंने jsfiddle में एक छोटा सा उदाहरण बनाया। मेरा एंड्रॉइड ब्राउजर में देखें कि मेरा क्या मतलब है: http://fiddle.jshell.net/5cvj5/show/light/

उत्तर

6

मैं क्या कर रहा हूं, और मुझे यह पता चला कि फेसबुक एक ही चुनौती को दूर करने के लिए करता है, जब इसे फोकस प्राप्त होता है तो पाठ के नीचे एक स्पेसर ब्लॉक तत्व जोड़ना था और उसके बाद दृश्य के नीचे स्क्रॉल करने के लिए है, तो जैसे:

var android_spacer = $('<div/>', { 
    'class' : 'android_spacer' 
}).css({ 
    'width' : '100%', 
    'height' : '200px' 
}).appendTo($('#parent_view')); 

$('#the_textarea').on('focus', function() { 
    $(this).after(android_spacer); 
}); 

$('#the_textarea').on('blur', function() { 
    $('.android_spacer').remove(); 
}); 

नोट यह है कि एक समय में केवल कभी एक स्पेसर परदे पर।

+0

मैं एक ही समस्या आ रहा हूँ और मैं अपने समाधान का परीक्षण किया गया था संभाल होगा। क्या आप कृपया मुझे बता सकते हैं कि #parent_view क्या है – zamil

1

, बस 0 करने के लिए पूर्ण और सेट नीचे करने के लिए आपके पाद लेख की स्थिति बनाने के लिए, यह यह