키보드가 나타날 때 모바일 Safari에서 고정 탐색 요소를 수정하는 방법은 무엇입니까?

Mobile Safari에서 고정 탐색 요소 수정

Mobile Safari에서 가상 키보드가 열릴 때 고정 탐색 요소가 그대로 유지되도록 하는 것이 어려울 수 있습니다. 이 문제는 Mobile Safari의 고정 요소 처리 시 알려진 버그로 인해 발생합니다.

단사진이 제안한 한 가지 솔루션은 입력 필드가 포커스를 받을 때 고정 요소의 위치를 ​​전환하는 것입니다. 포커스가 설정되면 고정 요소는 위치:절대로 설정되고 포커스가 손실되면 위치:고정으로 되돌아갑니다.

이 접근 방식을 구현하려면 다음 CSS를 추가하세요.

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

추가로 다음 JavaScript를 포함하세요.

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

위 내용은 키보드가 나타날 때 모바일 Safari에서 고정 탐색 요소를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!