ตำแหน่ง: แก้ไขใน iOS5 ย้ายเมื่ออินพุตถูกโฟกัส

น่าเสียดายที่คุณน่าจะดีที่สุดในการใช้การวางตำแหน่ง absolute สำหรับองค์ประกอบ fixed ของคุณเมื่อทำงานกับ IOS ใช่ IOS5 อ้างว่ารองรับการวางตำแหน่ง fixed แต่ทุกอย่างจะพังเมื่อคุณมีการควบคุมแบบโต้ตอบภายในองค์ประกอบคงที่นั้น

ฉันประสบปัญหาเดียวกันกับช่องค้นหาบนไซต์ switchitoff.net ของฉัน ใน IOS5 ส่วนหัวคงที่จะกระโดดลงมาที่หน้าหากช่องค้นหาได้รับการโฟกัสในขณะที่เลื่อนหน้า ฉันลองใช้วิธีแก้ไขปัญหาต่างๆ แล้ว และวิธีแก้ไขปัญหาที่มีอยู่ในปัจจุบันคือ <div> ซึ่งอยู่เหนือช่องค้นหา เมื่อคลิก <div> นี้ สิ่งต่อไปนี้จะเกิดขึ้น:

1. หน้าเพจถูกเลื่อนไปด้านบน
2. ส่วนหัว fixed เปลี่ยนเป็น absolute
3. <div> ที่อยู่บนช่องค้นหาถูกซ่อนอยู่
4. เน้นการค้นหา <input>

ขั้นตอนข้างต้นจะกลับกันเมื่อช่องค้นหาสูญเสียโฟกัส วิธีแก้ปัญหานี้จะป้องกันไม่ให้ส่วนหัวกระโดดลงมาที่หน้าเมื่อมีการคลิกช่องค้นหา แต่สำหรับไซต์ที่ง่ายกว่า คุณอาจใช้การวางตำแหน่งที่แน่นอนตั้งแต่แรกจะดีกว่า

มีปัญหายุ่งยากอีกประการหนึ่งกับ IOS5 และตำแหน่งคงที่ หากคุณมีองค์ประกอบที่คลิกได้บนพื้นที่ fixed โดยมีองค์ประกอบ body เลื่อนอยู่ด้านหลัง อาจส่งผลให้กิจกรรมการสัมผัสของคุณเสียหายได้

ตัวอย่างเช่น ใน switchitoff.net ปุ่มบนส่วนหัวคงที่จะไม่สามารถคลิกได้เมื่อมีการเลื่อนองค์ประกอบแบบโต้ตอบไปด้านหลัง touchstart ไม่ได้ถูกไล่ออกเมื่อมีการแตะปุ่มเหล่านี้ โชคดีที่ onClick ยังคงใช้งานได้ แม้ว่านี่จะเป็นทางเลือกสุดท้ายสำหรับ IOS ก็ตามเนื่องจากความล่าช้า

ในที่สุดก็สังเกตว่า (ใน IOS5) คุณสามารถคลิกที่ส่วนหัวคงที่และเลื่อนหน้าได้อย่างไร ฉันรู้ว่านี่เป็นการเลียนแบบวิธีที่คุณสามารถใช้ล้อเลื่อนบนส่วนหัวคงที่ในเบราว์เซอร์ปกติ แต่กระบวนทัศน์นี้ไม่สมเหตุสมผลสำหรับ Touch-UI ใช่หรือไม่

หวังว่า Apple จะยังคงปรับปรุงการจัดการองค์ประกอบคงที่ต่อไป แต่ในระหว่างนี้ คุณจะยึดตำแหน่ง absolute ไว้ได้ง่ายกว่า หากคุณมีสิ่งใดที่มีการโต้ตอบในพื้นที่คงที่ของคุณ นั่นหรือกลับไปที่ IOS4 เมื่อสิ่งต่าง ๆ ง่ายขึ้นมาก!

การใช้คำแนะนำของ JohnW เพื่อใช้ absolute แทน fixed ฉันพบวิธีแก้ปัญหานี้:

ขั้นแรกให้ตั้งค่า bind เพื่อตรวจจับเมื่ออินพุตเปิดโฟกัส เลื่อนไปที่ด้านบนของหน้าและเปลี่ยนองค์ประกอบ position เป็น absolute:

$('#textinput').bind('focus',function(e) { 
  $('html,body').animate({
        scrollTop: 0
   });
  $('#textinput-container').css('position','absolute');
  $('#textinput-container').css('top','0px');
});

โปรดทราบว่าฉันใช้ id textinput สำหรับอินพุตและ textinput-container สำหรับแถบด้านบน div ที่มีอินพุต

ตั้งค่าการเชื่อมโยงอื่นเพื่อตรวจจับเมื่ออินพุตไม่อยู่ในโฟกัสอีกต่อไปเพื่อเปลี่ยนตำแหน่งของ div กลับเป็น fixed

$('#textinput').bind('blur',function(e) { 
   $('#textinput-container').css('position','fixed');
  $('#textinput-container').css('top','0px');
});

ฉันใช้วิธีแก้ปัญหาที่คล้ายกันสำหรับแถบที่อยู่ด้านล่างสุดของหน้า โค้ดที่โพสต์ควรจะใช้ได้กับแถบที่อยู่ด้านบน แต่ฉันไม่ได้ทดสอบ

เวอร์ชันแก้ไขของโซลูชันของ pablobart แต่ไม่มีการเลื่อนขึ้นไปด้านบน:

// Absolute position
$('#your-field').bind('focus',function(e) { 
    setTimeout(function(){
        $('section#footer').css('position','absolute');
        $('section#footer').css('top',($(window).scrollTop() + window.innerHeight) - $('section#footer').height());
    }, 100);
});

// Back to fixed position
$('#your-field').bind('focusout',function(e) { 
    $('section#footer').removeAttr('style');
});

CSS แบบง่าย: section#footer *{ ตำแหน่ง:คงที่; ด้านล่าง:0; ซ้าย:0; ความสูง:42px*

วิธีนี้ใช้ได้ผลดีสำหรับฉัน โค้ดทั้งหมดทำคือรอจนกว่าผู้ใช้แตะที่ช่องข้อความ จากนั้นเปลี่ยนองค์ประกอบที่ระบุโดยพารามิเตอร์ 'jQuerySelector' จากตำแหน่ง 'คงที่' เป็น 'คงที่' เมื่อช่องข้อความหลุดโฟกัส (ผู้ใช้แตะอย่างอื่น) ตำแหน่งขององค์ประกอบจะเปลี่ยนกลับเป็น "คงที่"

// toggles the value of 'position' when the text field gains and looses focus
var togglePositionInResponseToInputFocus = function(jQuerySelector)
{
   // find the input element in question
   var element = jQuery(jQuerySelector); 

   // if we have the element
   if (element) {

      // get the current position value 
      var position = element.css('position'); 

      // toggle the values from fixed to static, and vice versa
      if (position == 'fixed') {
          element.css('position', 'static'); 
      } else if (position == 'static') {
          element.css('position', 'fixed'); 
      }
    }
}; 

และผู้จัดการเหตุการณ์ที่เกี่ยวข้อง:

var that = this; 

// called when text field gains focus
jQuery(that.textfieldSelector).on
(
    'focusin', 
    function()
    {
        togglePositionInResponseToInputFocus(that.jQuerySelector); 
    }
);

// called when text field looses focus
jQuery(that.textfieldSelector).on
(
   'focusout',
    function()
    {
        togglePositionInResponseToInputFocus(that.jQuerySelector); 
    }
 );

สาเหตุที่ทำให้ปุ่มต่างๆ ไม่สามารถคลิกได้ก็เนื่องมาจากปุ่มเหล่านี้มีการเลื่อนเนื้อหาไปจนมองไม่เห็น พวกเขายังคงอยู่ที่นั่น เพียงแต่ไม่ใช่ที่เดิมหรือที่ที่คุณเห็นพวกเขา

หากคุณสามารถเดาได้ว่าปุ่มถูกย้ายไปมากแค่ไหน (ขึ้นอยู่กับจำนวนเนื้อหาที่ถูกย้าย) คุณสามารถคลิกที่ปุ่มที่มองไม่เห็นและมันก็จะทำงานได้ตามปกติ กล่าวอีกนัยหนึ่ง หากเนื้อหาเลื่อนไป 50 พิกเซล ให้คลิกห่างออกไป 50 พิกเซลจากปุ่ม และเนื้อหาจะทำงาน

คุณสามารถเลื่อนเนื้อหาด้วยตนเองได้ (แม้จะเพียงเล็กน้อย) และปุ่มต่างๆ จะทำงานอีกครั้งตามที่คาดไว้

เพียงซ่อนองค์ประกอบคงที่ของคุณไว้ที่โฟกัส แล้วแสดงอีกครั้งเมื่อโฟกัสออก ฉันพนันได้เลยว่าผู้ใช้ของคุณไม่จำเป็นต้องเห็นมันเมื่อมีสมาธิ ฉันรู้ว่านี่ไม่ใช่วิธีแก้ปัญหา แต่ฉันคิดว่ามันเป็นแนวทางที่ดีกว่า ง่าย ๆ เข้าไว้.