Bagaimana untuk Menghalang Elemen Tetap daripada Melompat dalam Safari Mudah Alih dengan Papan Kekunci Maya?

Elemen Tetap Buggy dalam Safari Mudah Alih dengan Papan Kekunci Maya

Berurusan dengan elemen tetap dalam Safari Mudah Alih boleh menjadi satu cabaran, terutamanya apabila papan kekunci maya dibuka. Isu biasa timbul apabila elemen navigasi tetap melompat secara tidak dijangka apabila medan input dalam navigasi memperoleh fokus.

Punca dan Penyelesaian

Tingkah laku ini mungkin disebabkan oleh yang diketahui isu dalam Safari Mudah Alih. Penyelesaian yang dicadangkan melibatkan menukar kedudukan elemen tetap secara dinamik.

• Apabila elemen input memperoleh fokus dan papan kekunci maya muncul, tukar sifat kedudukan elemen tetap kepada mutlak.
• Pulihkan kedudukan tetap asal sebaik sahaja elemen input kehilangan fokus dan papan kekunci disembunyikan.

Coretan Kod

Coretan kod berikut menunjukkan penyelesaian ini:

.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
} 

if ('ontouchstart' in window) {
    /* cache dom references */ 
    var $body = $('body'); 

    /* bind events */
    $(document)
    .on('focus', 'input', function() {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input', function() {
        $body.removeClass('fixfixed');
    });
}

Dengan menambahkan kod ini, elemen navigasi akan kekal di bahagian bawah halaman walaupun apabila pengguna berinteraksi dengan medan input dan papan kekunci maya muncul.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Elemen Tetap daripada Melompat dalam Safari Mudah Alih dengan Papan Kekunci Maya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!