আইওএস 5 স্থির অবস্থান এবং ভার্চুয়াল কীবোর্ড

Question

আমার একটি মোবাইল ওয়েবসাইট রয়েছে যা পজিশনের মাধ্যমে পর্দার নীচে একটি ডিভ পিন করেছে: স্থির। আইওএস 5 এ আমি সমস্ত ফর্ম দিয়ে কাজ করি (আমি একটি আইপড টাচ পরীক্ষা করছি) যতক্ষণ না আমি ফর্ম সহ কোনও পৃষ্ঠায় আছি। আমি যখন কোনও ইনপুট ক্ষেত্রে ট্যাপ করি এবং ভার্চুয়াল কীবোর্ড প্রদর্শিত হয়, হঠাৎ আমার ডিভের স্থির অবস্থানটি হারিয়ে যায়। ডিভ এখন পৃষ্ঠার সাথে স্ক্রল করবে যতক্ষণ না কীবোর্ড দৃশ্যমান থাকে। একবার আমি কী-বোর্ডটি বন্ধ করতে সম্পন্ন হয়ে ক্লিক করুন, ডিভটি স্ক্রিনের নীচে তার অবস্থানে ফিরে আসে এবং অবস্থানটি স্থির করে: স্থির নিয়ম।

অন্য কেউ এই ধরনের আচরণ অভিজ্ঞতা আছে? এটি কি প্রত্যাশিত? ধন্যবাদ।

Comments

হ্যাঁ, দেখে মনে হচ্ছে আইওএস 5 এর পক্ষে অ্যাপল এটিকে এতটা ভালভাবে ভাবেনি। ভার্চুয়াল কীবোর্ড প্রদর্শিত হওয়ার সাথে সাথে কোনও স্থির অবস্থানের উপাদানগুলি পৃষ্ঠার সাথে আপেক্ষিক হয়ে ওঠে। এটি সম্ভবত ঠিক আছে যদি উপাদানগুলি একটি নিখুঁত অবস্থানে ফিরে আসে কারণ এটি লেআউটটি ভাঙবে না। দুর্ভাগ্যক্রমে এই উপাদানগুলির আসল স্থান নির্ধারণের তুলনায় অনেক কম। [রেড্যাক্টেড] এ আমার ফিক্সড শিরোনামের সাথে আমার ঠিক এই সমস্যাটি রয়েছে। পৃষ্ঠাটি নীচে স্ক্রোল করুন, তারপরে অনুসন্ধান বাক্সে ক্লিক করুন এবং ব্যাং ... বিন্যাসটি ভাঙ্গা। এমনকি আমি ফোকাস ইভেন্টে নিখুঁত অবস্থানের দিকে ফিরেও এটি ঠিক করার চেষ্টা করেছি, যা কাজ করে তবে আমি লস করি

— জন উইলিয়ামস

আমি এই একই সমস্যায় পড়েছি। এটি ঠিক হওয়ার বিষয়ে দেখার জন্য কি কেউ অ্যাপলের সাথে বাগ ফাইল করেছে? এছাড়াও, অন্য কেউ আইওএস 6 এ এই আচরণটি চালিয়ে যেতে দেখেছেন?

— রবার্ট হুই

আমি আইওএস 6 এর সাথে একই সমস্যায় পড়ছি।

— রেডটোপিয়া

একই সমস্যা এখনও iOS7 এ বিদ্যমান বলে মনে হচ্ছে!

— রিয়া ওয়েপ্রচেট

আইওএস 8 সংশোধন করা ... না বলে মনে হচ্ছে না

— contactmatt

Answer 1

আমার আবেদনে আমার এই সমস্যা ছিল। আমি এটির চারপাশে কীভাবে কাজ করছি তা এখানে:

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

আমি কেবল শীর্ষে স্ক্রোল করছি এবং এটি সেখানে অবস্থান করছি, তাই আইওএস ব্যবহারকারীর অদ্ভুত কিছু লক্ষ্য করা যায় না। এটিকে কিছু ব্যবহারকারীর এজেন্ট সনাক্তকরণে মোড়ানো করুন যাতে অন্যান্য ব্যবহারকারীরা এই আচরণটি না পান।

Comments

আক্ষরিকভাবে আজ এই সমস্যাটিতে হোঁচট খেয়েছে এবং এটি সবচেয়ে যুক্তিসঙ্গত বলে মনে হয়েছে, +1।

— ড্যানিয়েল

এটি বেশ ভাল কাজ করে। আমি কেবল এটি আইওএস ডিভাইসগুলির জন্য কল করি: var isIOS = /(iPadmittediPhoneypeiPod)/g.test(navigator.userAgent);

— রেডটোপিয়া

আমি $ (উইন্ডো) .স্ক্রোলটপ (0 )ও সরিয়েছি ... আমি মনে করি এটির প্রয়োজন নেই এবং এটি অনাকাঙ্ক্ষিত স্ক্রোলিংয়ের কারণ হয়েছে।

— রেডটোপিয়া

অথবা document.body.scrollTop = 0আপনি যদি jQuery ব্যবহার না করে এবং সর্বশেষতম ব্রাউজারগুলিকে লক্ষ্য করে দেখেন তবে।

— ল্যাংডন

দীর্ঘতর ফর্মগুলিতে, $(window).scrollTop(0);কেন্দ্রীকরণটি ফোকাসড ইনপুটটিকে স্ক্রিনটিকে অফ-স্ক্রিনে স্থানান্তরিত করতে পারে যেমন পৃষ্ঠার আরও নিচে একটি ইনপুট, বা যদি কোনও আইফোন প্রতিকৃতিতে থাকে। একটি ভাল সমাধান ফোকাস সেট চালু থাকে 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। শুনে দুঃখিত হলাম. এটি আইওএস 6 এবং লোয়ার ডিভাইসে আমার যে নির্দিষ্ট সমস্যা ছিল তা ছিল। এর পর থেকে আমি পুনর্বিবেচনা করি নি।

— ds111

Answer 3

আমরা আইপ্যাডের সাথে সমস্যা সমাধানের জন্য এই কোডটি ব্যবহার করি। এটি মূলত অফসেট এবং স্ক্রোল অবস্থানের মধ্যে বৈষম্যগুলি সনাক্ত করে - যার অর্থ 'স্থির' সঠিকভাবে কাজ করছে না।

$(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 প্লাগইন থেকে। পরিবর্তে আপনি উইন্ডো.সেটটাইমআউট ব্যবহার করতে পারেন।

— হ্যাচ

ব্লগ এবং ফোকাস ইনপুট এ একই ফাংশন ট্রিগার সাহায্য করবে।

— ব্লুসি

প্রতিভা - সত্যিই এটি খনন। এছাড়াও +1 থেকে @ ব্লুসির এই ফোকাসটি ব্যবহার করার পরামর্শ এবং স্ক্রলের পরিবর্তে অস্পষ্টতা।

— -14

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

এটি আসলে আইপ্যাডে আমার পক্ষে কাজ করে নি। আমি স্থির পাদলেখের অবস্থানটি আপেক্ষিকের সাথে পরিবর্তন করে শেষ করেছি এবং পৃষ্ঠার নীচে পাদলেখ রয়েছে যতক্ষণ না ইনপুট ব্লার ইভেন্টটি সনাক্ত হয়ে যায় যখন আমি অবস্থানটি ঠিক স্থানে পরিবর্তন করি।

— আকরিকস

আর কাজ করে না, আইওএস সম্ভবত যে কোনও বাগ এই কাজটি করেছে তা ঠিক করেছে

— কেভিন

Answer 5

এই সমস্যাটি নিয়ে গবেষণা করার সময় আমি যেমন করেছি ঠিক তেমন কেউই এই থ্রেডের উপরে ঘটবে। আমি এই থ্রেডটি এই বিষয়ে আমার চিন্তাভাবনা উদ্দীপনায় সহায়ক বলে মনে করেছি।

সাম্প্রতিক প্রকল্পে এটির জন্য এটি আমার সমাধান ছিল। আপনার কেবলমাত্র "টার্গেটএলেম" এর মানটি আপনার শিরোনামকে উপস্থাপন করে এমন একটি জিকুয়ারি নির্বাচনকারীতে পরিবর্তন করতে হবে।

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 অবধি দুর্দান্ত কাজ করে 7. উপাদানটির সঠিকভাবে অবস্থান করা হলেও অদৃশ্য হয়ে যাওয়ার সাথে অন্য কারও সমস্যা রয়েছে?

— রোনা কিলমার

@ রোনাকিলমার initএকটি নিয়মিত ফাংশনে পরিবর্তন করুন (স্ব- উদ্দীপনা নয়; এটি খুব তাড়াতাড়ি গুলি চালাচ্ছে)। তারপরে বক্তব্য iOSKeyboardFix.init();শেষ হওয়ার ঠিক আগে কল করুন if।

— সিফ্রি

@ সিফ্রি ধন্যবাদ, আমি কিছুক্ষণ আগে তা বাস্তবায়ন করেছি কিন্তু এটি আমার সমস্যা নয়। আরও কিছু চলছে। আমার স্থির উপাদানগুলির মধ্যে একটি এটি পুনরায় স্থাপন করার পরে অদৃশ্য হয়ে যায়। অন্য এক না। কীবোর্ড ঠিক করার কারণে আমি এটি দোষ দিতে পারি না কারণ এটি সর্বত্র ঘটছে না। আমি দেখিনি যে অন্য কারও কাছে একই সমস্যা আছে তাই আমাকে আরও গভীর খনন করতে হবে।

— রোনার কিলমার

Answer 6

এই বাগের জন্য আমি যে উত্তরগুলি পেয়েছি সেগুলির মধ্যে আমার পক্ষে কোনও কাজ হয়নি। 34fx পৃষ্ঠায় ব্যাক আপ করে আমি কেবল এটি ঠিক করতে সক্ষম হয়েছি, মোবাইল সাফারি এটিকে স্ক্রোল করে। jquery সহ:

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

এটি অবশ্যই সমস্ত ব্রাউজারগুলিতে কার্যকর হবে, তবে এটি আইওএসে ভাঙ্গা রোধ করে।

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 এর সাথে একই সমস্যাটি অনুভব করছিলাম। নীচের স্থির উপাদানগুলি আমার দৃষ্টিভঙ্গিটি ঠিকমতো ফোকাস না করে বিশৃঙ্খলা করবে।

আমি যখন এই এইচটিএমএলে এই মেটা ট্যাগ যুক্ত করেছি তখন সমস্ত কাজ শুরু করে।

<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

ধন্যবাদ @ পাসভিন। এটি আইওএস 9.3.2 এ আমার সমস্যাটি স্থির করেছে

— স্টিল্ল্যাটমিলিনাক্স

Answer 9

আমি Jory Cunninghamউত্তর নিয়েছি এবং এটি উন্নত করেছি:

অনেক ক্ষেত্রে, এটি কেবলমাত্র একটি উপাদান নয় যিনি পাগল হয়ে যান, তবে বেশ কয়েকটি স্থির অবস্থানের উপাদান রয়েছে, সুতরাং এই ক্ষেত্রে targetElemএকটি jQuery অবজেক্ট হওয়া উচিত যা আপনার "স্থির" করতে চান এমন সমস্ত স্থির উপাদান রয়েছে। হ্যাঁ, আপনি যদি স্ক্রোল করেন তবে এটি আইওএস কীবোর্ডকে দূরে সরিয়ে দেবে বলে মনে হচ্ছে ...

আপনার এই ডকুমেন্ট ইভেন্টের পরে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 ক্ষমাপ্রার্থী, আমার কোনও ধারণা ছিল না আপনি 'মাস্টার শেফ'

— মাইকে

যখন নির্বাচন করা হয়, সেই সময় শিরোনামের ইনপুট ফোকাসটি চলমান হয় (দৃশ্যমান নয়) select যে কেউ দয়া করে আমাকে সহায়তা করুন

— ভি কে চিক্কাদমাল্লা

Answer 10

আমার কাছে কেবল নেটওজেএমএমডি-এর মতো একটি সমাধান রয়েছে যা কেবলমাত্র আমার জন্য আইওএসের জন্য কার্যকর করে এবং নেটিভ স্ক্রোলিংটি ঘটতে দেয় সেজন্য স্থানীয় কীবোর্ড স্ক্রোলিংয়ের আগে এবং পরে স্কলটপ পরিমাপ করে সঠিকভাবে স্ক্রোল অফসেট নির্ধারণ করে:

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

আমি আমার আইপ্যাডের প্রধান বিন্যাসের সামগ্রীর স্থির অবস্থানটি ঠিক করেছি:

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

এটি একটি জটিল জেকিউয়ারি ইউআই ডায়ালগ এবং অন-স্ক্রীন কীবোর্ড মিক্সআপটিতে আমার পক্ষে খুব ভাল কাজ করেছে যখন ডায়লগ এবং কীবোর্ড একই সময়ে বন্ধ হয়ে গেলে আমার লেআউটটিকে অর্ধেকটা নীচে ফেলে রেখেছিল, যদিও বেশ কয়েকটি সম্পাদনা রয়েছে: var main = $ ('' শরীর ডিভ ')। প্রথম (); ... এবং ... ফাংশন মেইন হাইটচেনজড () {$ (শীর্ষ) .স্ক্রোলটপ (0); }

— অ্যাভেরালিস

setInterval... সত্যি? এটি করার চেয়ে বাগের সাথে থাকাই ভাল

— ভিএনসিঙ্ক

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

এই কার্যকারিতাটি খুঁজে পেতে সত্যিই কঠোর পরিশ্রম হয়েছিল, যা সংক্ষিপ্তভাবে ইনপুটগুলিতে ফোকাস এবং অস্পষ্ট ইভেন্টগুলির সন্ধান করে এবং ঘটনাগুলি ঘটে যখন নির্দিষ্ট বারের অবস্থানটি নির্বাচিতভাবে পরিবর্তনের জন্য স্ক্রোল করে। এটি বুলেটপ্রুফ, এবং সমস্ত কেস কভার করে (<>, স্ক্রোল, সম্পন্ন বোতামের সাহায্যে নেভিগেট করছে)। নোট আইডি = "নাভ" হ'ল আমার স্থির পাদলেখ বিভাগ। আপনি এটিকে সহজেই স্ট্যান্ডার্ড জেএস বা জেকুরিতে পোর্ট করতে পারেন। যারা বিদ্যুতের সরঞ্জামগুলি ব্যবহার করে তাদের জন্য এটি ডোজো ;-)

সংজ্ঞায়িত করুন (["ডোজো / রেডি", "দোজো / ক্যোয়ারী",], ফাংশন (প্রস্তুত, ক্যোরি))

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 );
    }

});

}); // end define

Comments

এটি দুর্দান্ত হতে পারে ... jQuery / জেএসকে পোর্ট করা এবং প্রতিবেদন করবে। একদিকে যেমন, কোনও প্রকল্পে পোর্টিং বা নন-স্ট্যান্ডার্ড সরঞ্জামগুলি যুক্ত করার জন্য কুল্যঙ্গিক স্ক্রিপ্টিং ভাষার পছন্দগুলির সমাধানগুলি সম্ভবতঃ সর্বজনীন সহায়ক হিসাবে খুঁজে পাবে না।

— এরিকপটার্স 0

এটি প্রতিটি ক্ষেত্রে কাজ করবে না কারণ এটি আপনাকে উপাদানটির 'স্থিতিশীল' অবস্থানে স্ক্রোল করবে, যা আপনার ইনপুটটির মূল অবস্থান থেকে কয়েক মাইল দূরে থাকতে পারে, বিশেষত যদি এটি কোনও স্থির ধারক হয়। যদি ধারকটির একটি overflow:hiddenনিয়ম থাকে তবে আপনি এখনই বাইরের বাইরের মতো আপনার ইনপুটটি দেখতে পাবেন না।

— জেমস এম। লে

Answer 14

'সঠিক' পেতে এটি একটি কঠিন সমস্যা। আপনি চেষ্টা করতে পারেন এবং ইনপুট উপাদান ফোকাসে পাদলেখ লুকিয়ে রাখতে পারেন এবং অস্পষ্টতা প্রদর্শন করতে পারেন, তবে এটি সর্বদা আইওএস-তে নির্ভরযোগ্য নয়। প্রায়শই প্রায়শই (একবারে দশ বার, আমার আইফোন 4 এস এ) বলুন যে ফোকাস ইভেন্টটি আগুনে ফেলতে ব্যর্থ হয়েছে (বা সম্ভবত কোনও রেসের শর্ত রয়েছে), এবং পাদচরণ লুকানো হয় না।

অনেক পরীক্ষা এবং ত্রুটির পরেও আমি এই আকর্ষণীয় সমাধানটি নিয়ে এসেছি:

<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 পিক্সেল দ্বারা সঙ্কুচিত হয় তখন ফুটারটি আড়াল করার জন্য গতিশীলভাবে একটি CSS মিডিয়া ক্যোয়ারী তৈরি করুন। কীবোর্ডটি খোলার ফলে ব্রাউজারের প্রদর্শনটি আকার পরিবর্তন করে, এটি আইওএস-এ কখনও ব্যর্থ হয় না। কারণ এটি জাভাস্ক্রিপ্টের পরিবর্তে সিএসএস ইঞ্জিন ব্যবহার করছে, এটি অনেক দ্রুত এবং মসৃণও!

দ্রষ্টব্য: আমি 'প্রদর্শন: কোনওটি' বা 'অবস্থান: স্থিতিশীল' এর চেয়ে 'দৃশ্যমানতা: লুকানো' কম চটকদার ব্যবহার করে দেখতে পেলাম, তবে আপনার মাইলেজটি পৃথক হতে পারে।

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

এটি প্রশ্নের উত্তর দেয় না।

— নিওফাইট

এটি করে, যেহেতু উত্তরটি হ'ল কোনও সমাধান নেই।

— Szalai Laci

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 সেকেন্ড অপেক্ষা করুন এবং ডিভটি স্ক্রিনের নীচে ফিরে যায় কিনা তা দেখুন। আমি বিশ্বাস করি কীবোর্ডটি খোলা থাকলে এটি কোনও ত্রুটি নয় তবে দেরি হওয়া প্রতিক্রিয়া।

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

আইওএস 8.3-তে লম্বা বুটস্ট্র্যাপ মডেলগুলির সাথে যে কোনও HTML পৃষ্ঠাগুলির জন্য এটি এখনও একটি বৃহত বাগ is উপরের প্রস্তাবিত সমাধানগুলির কোনওটিই কাজ করে না এবং লম্বা মডেলের ভাঁজের নীচে যে কোনও ক্ষেত্রে জুম করার পরে, মোবাইল সাফারি এবং / অথবা ডাব্লুউইউভিউভিউ স্থির উপাদানগুলিকে যেখানে এইচটিএমএল বডিটির স্ক্রোলটি ছিল সেখানে স্থানান্তরিত করতে পারে না, যেখানে তারা প্রকৃতপক্ষে যেখানে সেখানে ভুল সংকেতযুক্ত রেখে যায় leaving পাড়া

বাগটি ঠিকঠাক করতে, আপনার মডেল ইনপুটগুলির মতো ইভেন্ট শ্রোতাদের যুক্ত করুন:

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

আমি এই কাজগুলি অনুমান করছি কারণ এইচটিএমএল বডিটির স্ক্রোল উচ্চতা জোর করে আইওএস 8 ওয়েবভিউ যেখানে স্থির মডেল ডিভের বিষয়বস্তু হওয়ার প্রত্যাশা করে তার সাথে আসল দৃশ্যটি পুনরায় সারিবদ্ধ করে।

Answer 23

যদি কেউ পুরোপুরি আলাদা রুটের সন্ধান করে (যেমন আপনি স্ক্রোল করার সাথে সাথে এই "পাদলেখ" ডিভটি পিন করতেও দেখছেন না তবে আপনি কেবল ডিভটি পৃষ্ঠার নীচে থাকতে চান), আপনি কেবল পাদদেশের অবস্থানটি সেট করতে পারেন আপেক্ষিক।

এর অর্থ হ'ল এমনকি যদি ভার্চুয়াল কীবোর্ড আপনার মোবাইল ব্রাউজারে আসে তবে আপনার পাদচরণ কেবল পৃষ্ঠার নীচে অ্যাঙ্করড থাকবে, ভার্চুয়াল কীবোর্ড শোতে বা বন্ধ করার প্রতিক্রিয়া দেখানোর চেষ্টা করবে না।

স্পষ্টতই সাফারিটিতে এটি আরও ভাল দেখাচ্ছে যদি পজিশন ঠিক করা থাকে এবং পাদলেখ আপনি পৃষ্ঠাটি অনুসরণ করে উপরে বা নীচে স্ক্রোল করেন তবে ক্রোমের এই অদ্ভুত বাগের কারণে আমরা কেবল পাদলেখকে আপেক্ষিক করে তুলতে চলে এসেছি।

Answer 24

কোনও স্ক্রোলিং সমাধান আমার পক্ষে কাজ করে নি বলে মনে হয়। পরিবর্তে, কাজটি হ'ল ব্যবহারকারীর পাঠ্য সম্পাদনা করার সময় শরীরের অবস্থান স্থির করে দেওয়া হয় এবং তারপরে ব্যবহারকারীটি সম্পন্ন হওয়ার পরে এটি স্থিতিতে ফিরিয়ে দেওয়া হয়। এটি আপনার উপর আপনার সামগ্রী স্ক্রোলিং থেকে সাফারি রাখে। আপনি এটি উপাদান (গুলি) এর ফোকাস / অস্পষ্টতা (একক উপাদানের জন্য নীচে দেখানো হয়েছে তবে সমস্ত ইনপুট, টেক্সারিয়াসের জন্য হতে পারে) করতে পারেন, বা কোনও ব্যবহারকারী কোনও মডেল খোলার মতো সম্পাদনা শুরু করার জন্য যদি কিছু করতে থাকেন তবে আপনি এটি করতে পারেন এটি সেই ক্রিয়াকলাপে (যেমন মডেল খোলা / বন্ধ)।

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

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

Answer 25

iOS9 - একই সমস্যা।

টিএলডিআর - সমস্যার উত্স। সমাধানের জন্য, নীচে স্ক্রোল করুন

আমি একটি ফর্ম ছিল position:fixed আইডি = 'সাবস্ক্রাইব-পপআপ-ফ্রেম' সহ আইফ্রেমে

মূল প্রশ্ন অনুসারে, ইনপুট ফোকাসের ক্ষেত্রে স্ক্রিনের উপরের বিপরীতে আইফ্রেমে নথির শীর্ষে যেতে হবে।

ব্যবহারকারী এজেন্টকে আদর্শ হিসাবে সেট করে সাফারি দেব মোডে একই সমস্যা দেখা দেয়নি। সুতরাং মনে হচ্ছে সমস্যাটি পপ আপ হওয়ার পরে আইওএস ভার্চুয়াল কীবোর্ডের দ্বারা সৃষ্ট।

আইফ্রেমের অবস্থান (উদাহরণস্বরূপ $('#subscribe-popup-frame', window.parent.document).position()) কনসোলটি লগ ইন করে যা ঘটছে তাতে আমি কিছুটা দৃশ্যমানতা পেয়েছি এবং সেখান থেকে আমি দেখতে পাচ্ছিলাম {top: -x, left: 0}যে ভার্চুয়াল কীবোর্ড পপআপ হওয়ার সময় আইওএস উপাদানটির অবস্থান নির্ধারণ করছে (যেমন ইনপুট উপাদানটিতে ফোকাস করেছে)।

সুতরাং আমার সমাধানটি হ'ল সমস্যাটি গ্রহণ করা -x, সাইনটি বিপরীত করা এবং তারপরে সেই topঅবস্থানটি আবার আইফ্রেমে যুক্ত করতে jQuery ব্যবহার করা । যদি এর থেকে আরও ভাল সমাধান হয় তবে আমি এটি শুনতে পছন্দ করব তবে এক ডজন বিভিন্ন পদ্ধতির চেষ্টা করার পরে এটিই আমার পক্ষে কাজ করেছিল।

ত্রুটি:x আইওএস উপাদানটির অবস্থানের সাথে দুষ্টুমি করার পরে আমি চূড়ান্ত মানটি ক্যাপচার করেছি তা নিশ্চিত করার জন্য আমার 500 মিমি (একটি কম কাজ করতে পারে তবে আমি নিরাপদ থাকতে চেয়েছিলাম) একটি টাইমআউট সেট করা দরকার ছিল। ফলস্বরূপ, অভিজ্ঞতাটি খুব ঝকঝকে। । । তবে কমপক্ষে এটি কাজ করে

সমাধান

        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(){})