iOS 5 फिक्स्ड पोजिशनिंग और वर्चुअल कीबोर्ड

Question

मेरे पास एक मोबाइल वेबसाइट है जिसमें स्थिति के माध्यम से स्क्रीन के निचले भाग में पिन किया गया है: फिक्स्ड। IOS 5 में ठीक काम करता है (मैं एक iPod टच पर परीक्षण कर रहा हूं) जब तक कि मैं एक फॉर्म वाले पृष्ठ पर नहीं हूं। जब मैं एक इनपुट फ़ील्ड में टैप करता हूं और वर्चुअल कीबोर्ड दिखाई देता है, तो अचानक मेरी div की निश्चित स्थिति खो जाती है। जब तक कीबोर्ड दिखाई देता है तब तक div पेज के साथ स्क्रॉल करता है। एक बार जब मैं कीबोर्ड को बंद करने के लिए Done पर क्लिक करता हूं, तो div स्क्रीन के निचले भाग में अपनी स्थिति को बदल देता है और उस स्थिति का पालन करता है जो नियत नियम है।

क्या किसी और ने इस तरह के व्यवहार का अनुभव किया है? क्या यह अपेक्षित है? धन्यवाद।

Comments

हाँ, ऐसा लगता है कि Apple ने IOS5 के लिए इतनी अच्छी तरह से नहीं सोचा था। वर्चुअल कीबोर्ड दिखाई देते ही कोई भी निश्चित स्थिति तत्व पृष्ठ के सापेक्ष हो जाते हैं। यह शायद ठीक होगा यदि तत्व एक पूर्ण स्थिति में वापस आ गए क्योंकि यह लेआउट को नहीं तोड़ देगा। दुर्भाग्य से इन तत्वों का वास्तविक स्थान अभी तक कम अनुमानित है। मुझे [सटीक] पर अपने निश्चित हेडर के साथ यह सटीक समस्या है। पृष्ठ को नीचे स्क्रॉल करें, फिर खोज बॉक्स और बैंग ... लेआउट टूट पर क्लिक करें। मैंने इसे फ़ोकस इवेंट पर पूर्ण स्थिति में लाकर इसे ठीक करने का भी प्रयास किया है, जो काम करता है, लेकिन फिर मैं हार जाता हूं

— जॉन विलियम्स

मैं इसी समस्या में चला गया हूँ। क्या किसी ने Apple के साथ एक बग दर्ज किया है ताकि यह तय हो सके? इसके अलावा, किसी और को इस व्यवहार को iOS6 में जारी रखते हुए देखा है?

— रॉबर्ट हुई

मैं iOS6 के साथ एक ही समस्या में चल रहा हूँ।

— Redtopia

IOS7 में अभी भी यही समस्या है!

— रिया वेप्रेक्ट

IOS 8 में तय नहीं लगता ...

— contactmatt

Answer 1

मुझे अपने आवेदन में यह समस्या थी। यहां बताया गया है कि मैं इसके आसपास कैसे काम कर रहा हूं:

input.on('focus', function(){
    header.css({position:'absolute'});
});
input.on('blur', function(){
    header.css({position:'fixed'});
});

मैं बस ऊपर की ओर स्क्रॉल कर रहा हूं और वहां स्थिति बना रहा हूं, इसलिए iOS यूजर को कुछ भी अजीब नहीं लगता है। कुछ उपयोगकर्ता एजेंट का पता लगाने में इसे लपेटें ताकि अन्य उपयोगकर्ताओं को यह व्यवहार न मिले।

Comments

आज वास्तव में इस मुद्दे पर ठोकर खाई और यह सबसे उचित, +1 प्रतीत हुआ।

— डेनियल

यह बहुत अच्छी तरह से काम करता है। मैं इसे केवल iOS डिवाइसों के लिए कहता हूं: var isIOS = /(iDvidiPhonepgiPod)/g.test(navigator.userAgent);

— Redtopia

मैंने $ (विंडो) .scrollTop (0) को भी हटा दिया ... मुझे नहीं लगता कि इसकी आवश्यकता है और इससे अवांछित स्क्रॉलिंग हुई।

— रेडटॉपिया

या बस document.body.scrollTop = 0अगर आप jQuery का उपयोग नहीं कर रहे हैं और नवीनतम ब्राउज़रों को लक्षित कर रहे हैं।

— लैंगडन

लंबे समय तक रूपों पर, $(window).scrollTop(0);फोकस किए गए इनपुट को ऑफ-स्क्रीन स्थानांतरित करने का कारण बन सकता है उदाहरण के लिए पृष्ठ के नीचे एक इनपुट, या यदि कोई iPhone पोर्ट्रेट में है। बेहतर समाधान फोकस सेट पर header.css({position:'absolute',top:window.pageYOffset+'px'});और ब्लर सेट पर है header.css({position:'fixed',top:0});।

— रोबोकट

Answer 2

मेरे पास थोड़ा अलग आईपैड का मुद्दा था जहां वर्चुअल कीबोर्ड ने मेरे व्यूपोर्ट को ऑफस्क्रीन ऊपर धकेल दिया था। तब उपयोगकर्ता द्वारा वर्चुअल कीबोर्ड बंद करने के बाद मेरा व्यूपोर्ट अभी भी ऑफ़स्क्रीन था। मेरे मामले में मैंने कुछ ऐसा किया है:

var el = document.getElementById('someInputElement');
function blurInput() {
    window.scrollTo(0, 0);
}
el.addEventListener('blur', blurInput, false);

Comments

मेरे लिए मदद नहीं करता है :(

— दिमित्री

@Altaveron। ऐसा सुनने के लिए क्षमा करें। यह ios6 और निचले उपकरणों पर होने वाले एक विशिष्ट मुद्दे के लिए था। मैंने कब से रिवीजन नहीं किया है।

— ds111

Answer 3

यह वह कोड है जिसका उपयोग हम ipad के साथ समस्या को ठीक करने के लिए करते हैं। यह मूल रूप से ऑफसेट और स्क्रॉल स्थिति के बीच विसंगतियों का पता लगाता है - जिसका अर्थ है 'निश्चित' सही ढंग से काम नहीं कर रहा है।

$(window).bind('scroll', function () {
    var $nav = $(".navbar")
    var scrollTop = $(window).scrollTop();
    var offsetTop = $nav.offset().top;

    if (Math.abs(scrollTop - offsetTop) > 1) {
        $nav.css('position', 'absolute');
        setTimeout(function(){
            $nav.css('position', 'fixed');
        }, 1);
    }
});

Comments

यह jquery.timers प्लगइन से है। आप इसके बजाय window.setTimeout का उपयोग कर सकते हैं।

— हैच

इनपुट ब्लर और फ़ोकस पर इसी फ़ंक्शन को ट्रिगर करने से भी मदद मिलेगी।

— Blowsie

प्रतिभा - वास्तव में यह खुदाई। स्क्रॉल के बजाय फ़ोकस और ब्लर का उपयोग करने के लिए +1 से @ Blowsie का सुझाव भी।

— Skone

Answer 4

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

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

    var needsScrollUpdate = false;
    $(document).scroll(function(){
        if(needsScrollUpdate) {
            setTimeout(function() {
                $("body").css("height", "+=1").css("height", "-=1");
            }, 0);
        }
    });
    $("input, textarea").live("focus", function(e) {
        needsScrollUpdate = true;
    });

    $("input, textarea").live("blur", function(e) {
        needsScrollUpdate = false;
    });

Comments

यह वास्तव में iPad पर मेरे लिए काम नहीं किया। मैंने रिश्तेदार के लिए निश्चित पाद की स्थिति को बदलना समाप्त कर दिया और पृष्ठ के निचले भाग पर पाद लेख है जब तक कि इनपुट धब्बा घटना का पता नहीं चला जब मैंने स्थिति को वापस बदल दिया।

— २०:३

अब काम नहीं करता है, आईओएस ने शायद यह तय कर दिया कि जो भी बग ने यह काम किया है

— केविन

Answer 5

बस किसी मामले में इस धागे पर होता है जैसा कि मैंने इस मुद्दे पर शोध करते समय किया था। मैंने इस मुद्दे पर अपनी सोच को उत्तेजित करने में इस सूत्र को मददगार पाया।

हाल ही में एक परियोजना पर इसके लिए यह मेरा समाधान था। आपको बस अपने टारगेट का प्रतिनिधित्व करने वाले jQuery के चयनकर्ता को "targetElem" का मान बदलना होगा।

if(navigator.userAgent.match(/iPad/i) != null){

var iOSKeyboardFix = {
      targetElem: $('#fooSelector'),
      init: (function(){
        $("input, textarea").on("focus", function() {
          iOSKeyboardFix.bind();
        });
      })(),

      bind: function(){
            $(document).on('scroll', iOSKeyboardFix.react);  
                 iOSKeyboardFix.react();      
      },

      react: function(){

              var offsetX  = iOSKeyboardFix.targetElem.offset().top;
              var scrollX = $(window).scrollTop();
              var changeX = offsetX - scrollX; 

              iOSKeyboardFix.targetElem.css({'position': 'fixed', 'top' : '-'+changeX+'px'});

              $('input, textarea').on('blur', iOSKeyboardFix.undo);

              $(document).on('touchstart', iOSKeyboardFix.undo);
      },

      undo: function(){

          iOSKeyboardFix.targetElem.removeAttr('style');
          document.activeElement.blur();
          $(document).off('scroll',iOSKeyboardFix.react);
          $(document).off('touchstart', iOSKeyboardFix.undo);
          $('input, textarea').off('blur', iOSKeyboardFix.undo);
      }
};

};

फिक्स होल्ड में थोड़ी देरी होती है क्योंकि स्क्रॉल करते समय iOS डोम हेरफेर को रोकता है, लेकिन यह ट्रिक करता है ...

Comments

यह आईओएस 7 तक बढ़िया काम करता है। किसी और के पास होने वाले तत्व को ठीक से रखने और गायब होने की समस्या है?

— रोना किल्मर

@RonaKilmer initएक नियमित कार्य में बदलें (स्व-आह्वान नहीं; यह बहुत जल्दी फायरिंग है)। फिर बयान iOSKeyboardFix.init();के अंत से ठीक पहले कॉल करें if।

— 21

@ Cfree धन्यवाद, मैंने उस थोड़ी देर के लिए लागू किया लेकिन यह मेरा मुद्दा नहीं है। कुछ और चल रहा है। मेरे एक निश्चित तत्व को गायब कर दिया जाता है जब इसे रिपोज किया जाता है। अन्य एक नहीं है। मैं इसे ठीक नहीं कर सकता, क्योंकि यह हर जगह नहीं हो रहा है। मैंने यह नहीं देखा है कि किसी और को भी एक ही मुद्दा हो रहा है इसलिए मुझे गहरी खुदाई करनी होगी।

— रोना किल्मर

Answer 6

इस बग के लिए मुझे जो भी अन्य उत्तर मिले हैं उनमें से किसी ने भी मेरे लिए काम नहीं किया है। मैं पृष्ठ को 34px तक वापस स्क्रॉल करके इसे ठीक करने में सक्षम था, मोबाइल की सफारी इसे नीचे स्क्रॉल करती है। jquery के साथ:

$('.search-form').on('focusin', function(){
    $(window).scrollTop($(window).scrollTop() + 34);
});

यह स्पष्ट रूप से सभी ब्राउज़रों में प्रभावी होगा, लेकिन यह इसे iOS में टूटने से रोकता है।

Answer 7

यह मुद्दा वास्तव में कष्टप्रद है।

मैंने उपर्युक्त कुछ तकनीकों को संयोजित किया और इसके साथ आया:

$(document).on('focus', 'input, textarea', function() {
    $('.YOUR-FIXED-DIV').css('position', 'static');
});

$(document).on('blur', 'input, textarea', function() {
    setTimeout(function() {
        $('.YOUR-FIXED-DIV').css('position', 'fixed');
        $('body').css('height', '+=1').css('height', '-=1');
    }, 100);
});

मेरे पास दो फिक्स्ड नेबर्स (हेडर और फुटर, ट्विटर बूटस्ट्रैप का उपयोग करके) है। जब कीबोर्ड डाउन होता है तो दोनों ही अजीब तरीके से काम करते हैं और कीबोर्ड डाउन होने के बाद फिर से अजीब हो जाता है।

इस समय के साथ / देरी से तय यह काम करता है। मुझे अभी भी एक बार थोड़ी देर में एक गड़बड़ लगता है, लेकिन यह क्लाइंट को दिखाने के लिए काफी अच्छा लगता है।

अगर यह आपके काम का है, तो मुझे बताएं। अगर नहीं तो हमें कुछ और मिल सकता है। धन्यवाद।

Comments

आपको लगता है कि टाइमआउट की जरूरत नहीं है (कम से कम यह मेरे बिना ठीक काम कर रहा था), और अगर कुछ चुनिंदा तत्वों पर भी होता है, तो इसके अलावा यह समाधान बहुत अच्छा काम करता है।

— फिलिप गूच

Answer 8

मैं iOS7 के साथ एक ही समस्या का सामना कर रहा था। नीचे के तय तत्व मेरे विचार को ठीक से फोकस नहीं करेंगे।

जब मैंने इस मेटा टैग को अपने html में जोड़ा तो सभी ने काम करना शुरू कर दिया।

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,height=device-height" >

जिस हिस्से में अंतर था वह था:

height=device-height

आशा है कि किसी की मदद करता है।

Comments

साभार @pasevin इसने iOS 9.3.2

— stillatmylinux

Answer 9

मैंने Jory Cunninghamउत्तर लिया है और इसमें सुधार किया है:

कई मामलों में, यह केवल एक तत्व नहीं है, जो पागल हो जाता है, बल्कि कई निश्चित स्थान पर स्थित तत्व हैं, इसलिए इस मामले में, targetElemएक jQuery ऑब्जेक्ट होना चाहिए जिसमें सभी निश्चित तत्व हैं जिन्हें आप "ठीक" करना चाहते हैं। हो, ऐसा लगता है कि अगर आप स्क्रॉल करते हैं तो आईओएस कीबोर्ड चला जाता है ...

उल्लेख करने की आवश्यकता है कि आपको इस AFTER दस्तावेज़ DOM readyघटना का उपयोग करना चाहिए या समापन </body>टैग से पहले ।

(function(){
    var targetElem = $('.fixedElement'), // or more than one
        $doc       = $(document),
        offsetY, scrollY, changeY;

    if( !targetElem.length || !navigator.userAgent.match(/iPhone|iPad|iPod/i) )
        return;

    $doc.on('focus.iOSKeyboardFix', 'input, textarea, [contenteditable]', bind);

    function bind(){
        $(window).on('scroll.iOSKeyboardFix', react);
        react();
    }

    function react(){
        offsetY = targetElem.offset().top;
        scrollY = $(window).scrollTop();
        changeY = offsetY - scrollY;

        targetElem.css({'top':'-'+ changeY +'px'});

        // Instead of the above, I personally just do:
        // targetElem.css('opacity', 0);

        $doc.on('blur.iOSKeyboardFix', 'input, textarea, [contenteditable]', unbind)
            .on('touchend.iOSKeyboardFix', unbind);
    }

    function unbind(){
        targetElem.removeAttr('style');
        document.activeElement.blur();

        $(window).off('scroll.iOSKeyboardFix');
        $doc.off('touchend.iOSKeyboardFix blur.iOSKeyboardFix');
    }
})();

Comments

@vsync माफी, मुझे नहीं पता था कि आप 'मास्टर शेफ' थे

— माइक

जब चयन किया जाता है, तो उस समय हेडर में इनपुट फ़ोकस ऊपर जा रहा होता है (दिखाई नहीं देता)। मैं चयन और इनपुट दायर पर ध्यान केंद्रित करते हुए हेडर डि को ठीक करना चाहता हूं। कृपया मेरी मदद करें

— VK Chikkadamalla

Answer 10

मेरे पास @NealJMD के समान एक समाधान है, केवल खदान को छोड़कर IOS के लिए निष्पादित होता है और देशी कीबोर्ड स्क्रॉल करने से पहले और बाद में सेटटाउट का उपयोग करके स्क्रोलटॉप को मापकर स्क्रॉल ऑफसेट को सही ढंग से निर्धारित करता है, ताकि देशी स्क्रॉलिंग हो सके।

var $window = $(window);
var initialScroll = $window.scrollTop();
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
  setTimeout(function () {
    $window.scrollTop($window.scrollTop() + (initialScroll - $window.scrollTop()));
  }, 0);
}

Answer 11

मैंने अपना Ipad मुख्य लेआउट सामग्री निश्चित स्थान इस प्रकार तय किया है:

var mainHeight;
var main = $('.main');

// hack to detects the virtual keyboard close action and fix the layout bug of fixed elements not being re-flowed
function mainHeightChanged() {
    $('body').scrollTop(0);
}

window.setInterval(function () {
    if (mainHeight !== main.height())mainHeightChanged();
    mainHeight = main.height();
}, 100);

Comments

यह मेरे लिए एक जटिल JQUery UI डायलॉग और ऑन-स्क्रीन कीबोर्ड मिक्सअप में वास्तव में अच्छी तरह से काम करता है जिसने मेरे लेआउट को स्क्रीन से आधा नीचे छोड़ दिया जब संवाद और कीबोर्ड एक ही समय में बंद हो जाते हैं, हालांकि संपादन के एक जोड़े के साथ: var main = $ (' शरीर div '); पहला (); ... और ... फ़ंक्शन mainHeightChanged () {$ (शीर्ष) .scrollTop (0); }

— एवेरेलिस

setInterval... वास्तव में? यह करने के लिए बग के साथ रहने के बजाय बस बेहतर है

— vsync

Answer 12

मुझे @ ds111 s से भी ऐसी ही समस्या थी। मेरी वेबसाइट को कीबोर्ड द्वारा पुश किया गया था लेकिन कीबोर्ड बंद होने पर नीचे नहीं गया।

पहले मैंने @ ds111 समाधान की कोशिश की, लेकिन मेरे पास दो inputक्षेत्र थे। बेशक, पहले कीबोर्ड चला जाता है, फिर धब्बा (या ऐसा कुछ) होता है। तो दूसरा inputकीबोर्ड के नीचे था, जब फ़ोकस सीधे एक इनपुट से दूसरे इनपुट पर जाता था।

इसके अलावा, "जंप अप" मेरे लिए पर्याप्त नहीं था क्योंकि पूरे पृष्ठ में केवल आईपैड का आकार है। इसलिए मैंने स्क्रॉल को आसान बना दिया।

अंत में, मुझे इवेंट श्रोता को सभी इनपुट्स से जोड़ना पड़ा, यहां तक ​​कि उन, जो वर्तमान में छिपे हुए थे, इसलिए live।

सभी एक साथ मैं निम्नलिखित जावास्क्रिप्ट स्निपेट को समझा सकता हूं: वर्तमान और सभी भविष्य के लिए निम्न ब्लर ईवेंट श्रोता संलग्न करें inputऔर textarea(= live): एक ग्रेस पीरियड (= window.setTimeout(..., 10)) प्रतीक्षा करें और आसानी से टॉप (= animate({scrollTop: 0}, ...)) पर स्क्रॉल करें लेकिन केवल "कोई कीबोर्ड नहीं" दिखाया गया "(= if($('input:focus, textarea:focus').length == 0))।

$('input, textarea').live('blur', function(event) {
    window.setTimeout(function() {
        if($('input:focus, textarea:focus').length == 0) {
            $("html, body").animate({ scrollTop: 0 }, 400);
        }
    }, 10)
})

ध्यान रखें, कि अनुग्रह अवधि (= 10) बहुत छोटा हो सकता है या हालांकि कोई कुंजीपटल अभी भी दिखाया जा सकता है inputया textareaध्यान केंद्रित है। बेशक, यदि आप स्क्रॉलिंग को तेज़ या धीमा करना चाहते हैं, तो आप अवधि (= 400) समायोजित कर सकते हैं

Answer 13

वास्तव में इस वर्कअराउंड को खोजने के लिए कड़ी मेहनत की गई, जो कि इनपुट पर फोकस और ब्लर घटनाओं के लिए संक्षिप्त रूप में दिखता है, और घटनाओं के होने पर निश्चित बार की स्थिति को चुनने के लिए स्क्रॉल करना। यह बुलेटप्रूफ है, और सभी मामलों को कवर करता है (<>, स्क्रॉल, किए गए बटन के साथ नेविगेट करना)। नोट आईडी = "नेवी" मेरा फिक्स्ड फूटर डिव है। आप इसे आसानी से मानक js, या jquery में पोर्ट कर सकते हैं। यह बिजली उपकरण का उपयोग करने वालों के लिए डोज़ है ;-)

परिभाषित (["डोजो / रेडी", "डोजो / क्वेरी",], फंक्शन (रेडी, क्वेरी) {

ready(function(){

    /* This addresses the dreaded "fixed footer floating when focusing inputs and keybard is shown" on iphone 
     * 
     */
    if(navigator.userAgent.match(/iPhone/i)){
        var allInputs = query('input,textarea,select');
        var d = document, navEl = "nav";
        allInputs.on('focus', function(el){
             d.getElementById(navEl).style.position = "static";
        });

        var fixFooter = function(){
            if(d.activeElement.tagName == "BODY"){
                d.getElementById(navEl).style.position = "fixed";
            }
        };
        allInputs.on('blur', fixFooter);
        var b = d.body;
        b.addEventListener("touchend", fixFooter );
    }

});

}); // अंत परिभाषित

Comments

यह भयानक हो सकता है ... jQuery / js को पोर्ट करना और वापस रिपोर्ट करेगा। एक तरफ के रूप में, आला स्क्रिप्टिंग भाषा विकल्पों में समाधान जो एक परियोजना में गैर-मानक टूल को पोर्ट करने या जोड़ने की आवश्यकता है, अनुमानतः, सार्वभौमिक रूप से सहायक नहीं होने जा रहे हैं।

— ericpeters0n

यह हर मामले के लिए काम नहीं करेगा क्योंकि यह आपको तत्व की 'स्थिर' स्थिति तक ले जाएगा, जो आपके इनपुट की मूल स्थिति से मीलों दूर हो सकता है, खासकर अगर यह एक निश्चित कंटेनर में हो। यदि कंटेनर में एक overflow:hiddenनियम है, तो आप अपने इनपुट को बिल्कुल नहीं देखेंगे क्योंकि यह अब बॉक्स के बाहर है।

— जेम्स एम। लेट

Answer 14

A सही ’होने के लिए यह एक कठिन समस्या है। आप कोशिश कर सकते हैं कि इनपुट तत्व फ़ोकस पर फ़ूटर को छिपाएँ और ब्लर पर दिखाएं, लेकिन यह हमेशा iOS पर विश्वसनीय नहीं होता है। हर बार (दस में एक बार, मेरे iPhone 4S पर, कहते हैं) ध्यान देने वाली घटना आग लगने में विफल हो जाती है (या शायद एक दौड़ की स्थिति है), और पाद छिपा नहीं रहता है।

बहुत परीक्षण और त्रुटि के बाद, मैं इस दिलचस्प समाधान के साथ आया:

<head>
    ...various JS and CSS imports...
    <script type="text/javascript">
        document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
    </script>
</head>

अनिवार्य रूप से: डिवाइस की खिड़की की ऊंचाई निर्धारित करने के लिए जावास्क्रिप्ट का उपयोग करें, फिर पाद को छिपाने के लिए गतिशील रूप से एक सीएसएस मीडिया क्वेरी बनाएं जब खिड़की की ऊंचाई 10 पिक्सल से सिकुड़ती है। क्योंकि कीबोर्ड खोलना ब्राउज़र डिस्प्ले को आकार देता है, यह iOS पर कभी भी विफल नहीं होता है। क्योंकि यह जावास्क्रिप्ट के बजाय सीएसएस इंजन का उपयोग कर रहा है, यह बहुत तेज है और चिकनी भी है!

नोट: मैंने 'दृश्यता: छिपी' की तुलना में 'डिस्प्ले: कोई नहीं' या 'पोजिशन: स्टैटिक' का उपयोग करते हुए पाया, लेकिन आपका माइलेज अलग-अलग हो सकता है।

Comments

आपको पोर्ट्रेट और लैंडस्केप मोड दोनों के लिए इसे ठीक करने के लिए ऊंचाई और चौड़ाई के बीच स्विच करना पड़ सकता है।

— नील मुनरो

Answer 15

मेरे लिये कार्य करता है

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    $(document).on('focus', 'input, textarea', function() {
        $('header').css({'position':'static'});
    });
    $(document).on('blur', 'input, textarea', function() {
        $('header').css({'position':'fixed'});
    });
}

Answer 16

जैसे ही उपयोगकर्ता स्क्रॉल करता है, हमारे मामले में यह स्वयं ठीक हो जाएगा। तो यह ठीक है कि हम प्रयोग कर रहे पर एक स्क्रॉल अनुकरण करने के लिए है blurकिसी पर inputया textarea:

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

Answer 17

मेरा जवाब है कि यह नहीं किया जा सकता है।

मैं 25 जवाब देखता हूं लेकिन मेरे मामले में कोई काम नहीं करता है। यही कारण है कि जब कीबोर्ड चालू होता है तो याहू और अन्य पेज फिक्स्ड हैडर को छिपा देते हैं। और बिंग पूरे पृष्ठ को गैर-स्क्रॉल करने योग्य (अतिप्रवाह-य: छिपा हुआ) बदल देता है।

ऊपर चर्चा किए गए मामले अलग-अलग हैं, कुछ में स्क्रॉल करते समय समस्याएँ हैं, कुछ फ़ोकस या ब्लर पर। कुछ में पाद लेख, या शीर्ष लेख हैं। मैं अब प्रत्येक संयोजन का परीक्षण नहीं कर सकता, लेकिन आप यह महसूस कर सकते हैं कि यह आपके मामले में नहीं किया जा सकता है।

Comments

इस सवाल का जवाब नहीं है।

— नवगीत

यह करता है, क्योंकि जवाब है कि कोई समाधान नहीं है।

— सज्जलाई लैकी

Answer 18

गितुब पर यह समाधान पाया।

https://github.com/Simbul/baker/issues/504#issuecomment-12821392

सुनिश्चित करें कि आपके पास स्क्रॉल करने योग्य सामग्री है।

// put in your .js file
$(window).load(function(){
    window.scrollTo(0, 1);
});

// min-height set for scrollable content
<div id="wrap" style="min-height: 480px">
  // website goes here
</div>

पता बार एक जोड़ा बोनस के रूप में सिलवटों।

Answer 19

मामले में कोई भी यह कोशिश करना चाहता था। मुझे इसमें इनपुट फ़ील्ड के साथ एक निश्चित पाद लेख पर मेरे लिए निम्नलिखित काम करना था।

<script>
    $('document').ready(
        function() {
            if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)
                  || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
                var windowHeight = $(window).height();
                var documentHeight = $(document).height();

                $('#notes').live('focus', function() {
                    if (documentHeight > windowHeight) {
                        $('#controlsContainer').css({
                            position : 'absolute'
                        });
                        $("html, body").animate({
                            scrollTop : $(document).height()
                        }, 1);
                    }
                });
                $('#notes').live('blur', function() {
                    $('#controlsContainer').css({
                        position : 'fixed'
                    });
                    $("html, body").animate({
                        scrollTop : 0
                    }, 1);
                });
            }
        });
</script>

Answer 20

मेरे साथ भी वही दिक्कत है। लेकिन मुझे एहसास हुआ कि निश्चित स्थिति में बस देरी है और टूटी नहीं है (कम से कम मेरे लिए)। 5-10 सेकंड प्रतीक्षा करें और देखें कि क्या div स्क्रीन के निचले हिस्से में वापस समायोजित होती है। मेरा मानना ​​है कि यह एक त्रुटि नहीं है, लेकिन कीबोर्ड खुला होने पर विलंबित प्रतिक्रिया है।

Answer 21

मैंने इस धागे से सभी तरीकों की कोशिश की, लेकिन अगर उन्होंने मदद नहीं की, तो उन्होंने और भी बुरा किया। अंत में, मैंने ध्यान केंद्रित करने के लिए बल डिवाइस का फैसला किया:

$(<selector to your input field>).focus(function(){
    var $this = $(this);
    if (<user agent target check>) {
        function removeFocus () {
            $(<selector to some different interactive element>).focus();
            $(window).off('resize', removeFocus);
        }
        $(window).on('resize', removeFocus);
    }
});

और इसने एक आकर्षण की तरह काम किया और मेरा चिपचिपा लॉगिन-रूप तय किया।

कृपया ध्यान दें:

1. उपरोक्त जेएस कोड केवल मेरे विचार को प्रस्तुत करने के लिए है, इस स्निपेट को निष्पादित करने के लिए कृपया अपनी स्थिति के लिए कोणीय ब्रेसिज़ (<>) में उचित मूल्यों के साथ मान बदलें।
2. इस कोड के साथ काम करने के लिए डिज़ाइन किया गया है jQuery v1.10.2

Answer 22

यह अभी भी iOS 8.3 में लम्बे बूटस्ट्रैप मोडल वाले किसी भी HTML पेज के लिए एक बड़ा बग है। ऊपर दिए गए प्रस्तावित समाधानों में से कोई भी काम नहीं किया और एक लंबा मोडल की तह के नीचे किसी भी क्षेत्र में ज़ूम करने के बाद, मोबाइल सफारी और / या WkWebView निर्धारित तत्वों को स्थानांतरित कर देगा जहां HTML शरीर की स्क्रॉल स्थित थी, जहां उन्हें वास्तव में जहां था के साथ गलत तरीके से छोड़ दिया गया था बाहर रखा हआ।

बग को वर्कअराउंड करने के लिए, अपने किसी भी मोडल इनपुट में इवेंट श्रोता को शामिल करें जैसे:

$(select.modal).blur(function(){
  $('body').scrollTop(0);
});

मैं इस काम का अनुमान लगा रहा हूं क्योंकि HTML बॉडी की स्क्रॉल ऊंचाई को मजबूर करना वास्तविक दृश्य को फिर से संरेखित करता है जहां iOS 8 WebView तय मोडल डिव की सामग्री होने की उम्मीद करता है।

Answer 23

यदि कोई पूरी तरह से अलग मार्ग ढूंढ रहा है (जैसे कि आप स्क्रॉल करते समय इस "पाद" div को पिन करना भी नहीं चाह रहे हैं, लेकिन आप बस पृष्ठ के निचले भाग में रहना चाहते हैं), तो आप केवल पाद स्थिति सेट कर सकते हैं रिश्तेदार।

इसका मतलब है कि भले ही वर्चुअल कीबोर्ड आपके मोबाइल ब्राउज़र पर आता है, लेकिन आपका पाद पृष्ठ के निचले हिस्से के लिए लंगर डाले रहेगा, वर्चुअल कीबोर्ड शो या बंद करने के लिए प्रतिक्रिया करने की कोशिश नहीं करेगा।

स्पष्ट रूप से यह सफारी पर बेहतर दिखता है यदि स्थिति तय हो गई है और पाद पृष्ठ का अनुसरण करता है जैसा कि आप ऊपर या नीचे स्क्रॉल करते हैं लेकिन क्रोम पर इस अजीब बग के कारण, हमने केवल पाद लेख को सापेक्ष बनाने के लिए स्विचन समाप्त कर दिया।

Answer 24

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

$("#myInput").on("focus", function () {
    $("body").css("position", "fixed");
});

$("#myInput").on("blur", function () {
    $("body").css("position", "static");
});

Answer 25

iOS9 - एक ही समस्या।

TLDR - समस्या का स्रोत। समाधान के लिए, नीचे स्क्रॉल करें

मेरे पास position:fixedआईडी = 'सदस्यता-पॉपअप-फ्रेम' के साथ एक आइफ्रेम में एक फॉर्म था

मूल प्रश्न के अनुसार, इनपुट पर फोकस iframe स्क्रीन के शीर्ष के विपरीत दस्तावेज़ के शीर्ष पर जाएगा।

यही समस्या सफारी देव मोड में उपयोगकर्ता एजेंट के साथ एक विचारधारा के लिए सेट नहीं हुई थी। ऐसा लगता है कि यह समस्या आईओएस वर्चुअल कीबोर्ड के कारण है जब यह पॉप अप होता है।

मुझे आइफ्रेम की पोजीशन (जैसे $('#subscribe-popup-frame', window.parent.document).position()) को सांत्वना देते हुए कंसोल में कुछ दृश्यता हो रही थी और वहां से मैं देख सकता था कि आईओएस एलिमेंट की स्थिति सेट कर रहा है {top: -x, left: 0}जब वर्चुअल कीबोर्ड पॉप अप हो गया (यानी इनपुट तत्व पर फोकस्ड)।

तो मेरा समाधान उस पेस्की को लेना था -x, साइन को उल्टा करना और फिर उस जोड़ने के लिए jQuery का उपयोग करनाtop स्थिति को आइफ्रेम में करना था। अगर कोई बेहतर उपाय है, तो मैं इसे सुनना पसंद करूंगा, लेकिन एक दर्जन अलग-अलग तरीकों की कोशिश करने के बाद यह मेरे लिए काम करने वाला एकमात्र था।

ड्राबैक: मुझे 500ms का टाइमआउट सेट करने की आवश्यकता है (शायद कम काम करेगा लेकिन मैं सुरक्षित रहना चाहता था) यह सुनिश्चित करने के लिए कि xआईओएस ने तत्व की स्थिति के साथ अपनी शरारत करने के बाद अंतिम मूल्य पर कब्जा कर लिया । नतीजतन, अनुभव बहुत झटकेदार है। । । लेकिन कम से कम यह काम करता है

उपाय

        var mobileInputReposition = function(){
             //if statement is optional, I wanted to restrict this script to mobile devices where the problem arose
            if(screen.width < 769){
                setTimeout(function(){
                    var parentFrame = $('#subscribe-popup-frame',window.parent.document);
                    var parentFramePosFull = parentFrame.position();
                    var parentFramePosFlip = parentFramePosFull['top'] * -1;
                    parentFrame.css({'position' : 'fixed', 'top' : parentFramePosFlip + 'px'});
                },500);
            }    
        }   

फिर जैसे mobileInputRepositionकुछ $('your-input-field).focus(function(){})और में कॉल करें$('your-input-field).blur(function(){})