Posisi: diperbaiki di iOS5 Bergerak saat input terfokus

Sayangnya Anda mungkin sebaiknya menggunakan pemosisian absolute untuk elemen fixed Anda saat bekerja dengan IOS. Ya, IOS5 memang mengklaim mendukung pemosisian fixed, tetapi semuanya akan gagal jika Anda memiliki kontrol interaktif dalam elemen tetap tersebut.

Saya mengalami masalah yang sama dengan kotak pencarian di situs switchitoff.net saya. Di IOS5, header tetap akan melompat ke bawah halaman jika kotak pencarian mendapatkan fokus saat halaman di-scroll. Saya mencoba berbagai solusi, dan yang saya miliki saat ini adalah <div> yang berada di atas kotak pencarian. Ketika <div> ini diklik, hal berikut terjadi:

1. Halaman digulir ke atas
2. Tajuk fixed diubah menjadi absolute
3. Angka <div> yang menutupi kotak pencarian disembunyikan
4. Pencarian <input> terfokus

Langkah-langkah di atas dibalik ketika kotak pencarian kehilangan fokus. Solusi ini mencegah header melompat ke bawah halaman ketika kotak pencarian diklik, namun untuk situs yang lebih sederhana Anda mungkin lebih baik menggunakan pemosisian absolut terlebih dahulu.

Ada masalah rumit lainnya dengan IOS5 dan pemosisian tetap. Jika Anda memiliki elemen yang dapat diklik di area fixed dengan body elemen yang di-scroll di belakangnya, hal ini dapat merusak peristiwa sentuhan Anda.

Misalnya, pada switchitoff.net tombol pada header tetap menjadi tidak dapat diklik ketika elemen interaktif di-scroll di belakangnya. touchstart bahkan tidak diaktifkan ketika tombol ini diketuk. Untungnya onClick sepertinya masih berfungsi, meskipun ini selalu menjadi pilihan terakhir untuk iOS karena penundaan.

Terakhir, perhatikan bagaimana (di iOS5) Anda dapat mengklik header tetap dan menggulir halaman. Saya tahu ini mengemulasi cara Anda menggunakan roda gulir di atas header tetap di browser normal, tapi tentunya paradigma ini tidak masuk akal untuk UI sentuh?

Mudah-mudahan Apple akan terus menyempurnakan penanganan elemen tetap, namun sementara itu lebih mudah untuk tetap menggunakan pemosisian absolute jika Anda memiliki sesuatu yang interaktif di area tetap Anda. Itu atau kembali ke IOS4 ketika segalanya jauh lebih mudah!

Menggunakan rekomendasi JohnW untuk menggunakan absolute alih-alih fixed Saya menemukan solusi ini:

Pertama-tama atur bind untuk mendeteksi ketika input berada pada fokus, gulir ke bagian atas halaman dan ubah elemen position menjadi absolute:

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

Perhatikan bahwa saya menggunakan id textinput untuk input dan textinput-container untuk bilah atas div yang berisi input.

Siapkan pengikatan lain untuk mendeteksi ketika input tidak lagi fokus untuk mengubah posisi div kembali ke fixed

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

Saya telah menggunakan solusi serupa untuk bilah yang dipasang di bagian bawah halaman, kode yang diposting seharusnya berfungsi untuk bilah yang dipasang di bagian atas tetapi saya tidak mengujinya

Versi modifikasi dari solusi pablobart tetapi tanpa menggulir ke atas:

// 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 sederhana: section#footer *{ position:fixed; bawah:0; kiri:0; tinggi:42 piksel }*

Solusi ini bekerja cukup baik untuk saya. Yang dilakukan kode hanyalah menunggu hingga pengguna mengetuk kolom teks, lalu mengubah elemen yang diidentifikasi oleh parameter 'jQuerySelector' dari posisi 'tetap' ke 'statis'. Ketika bidang teks kehilangan fokus (pengguna mengetuk sesuatu yang lain) posisi elemen diubah kembali ke 'tetap'.

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

Dan event handler terkait:

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

Alasan mengapa tombol-tombol tersebut menjadi tidak dapat diklik adalah karena tombol-tombol tersebut benar-benar bergulir tanpa terlihat bersama kontennya. Mereka masih ada, hanya saja tidak di lokasi aslinya, atau di tempat Anda melihatnya.

Jika Anda dapat menebak seberapa banyak tombol telah berpindah (berdasarkan seberapa banyak konten telah berpindah) Anda dapat mengklik tombol yang tidak terlihat dan tombol tersebut akan berfungsi normal. Dengan kata lain, jika konten telah di-scroll sebesar 50 piksel, klik 50 piksel dari tombol dan itu akan berfungsi.

Anda dapat menggulir konten secara manual (meskipun sedikit) dan tombol akan kembali berfungsi seperti yang diharapkan.

Sembunyikan saja elemen tetap Anda pada fokus dan kemudian tampilkan lagi pada fokus. Saya yakin pengguna Anda tidak perlu melihatnya saat fokus. Saya tahu ini bukanlah solusi tetapi menurut saya ini adalah pendekatan yang lebih baik. Tetap sederhana.