JS는 모바일 웹 개발에서 휴대폰 입력창 팝업 관련 예제 코드를 해결합니다.

모바일 웹 개발과 PC측의 차이점은 휴대폰에서의 입력이 소프트 키보드이기 때문에 문제가 있을 것입니다. 즉, 입력이 있을 때 키보드가 튀어나오고 전체가 페이지가 부득이하게 변경됩니다. 이 문제를 해결하는 방법? 아래에서는 모바일 웹 개발 시 휴대폰 입력창이 뜨는 문제를 해결하기 위해 Script House 에디터가 JS를 여러분께 공유해 드립니다.

모바일 웹 개발과 PC 측의 차이점은 휴대폰은 소프트 키보드라서 그럴 겁니다. 문제는 입력이 있을 때 키보드가 튀어나와 페이지 전체가 필연적으로 바뀌는 것입니다

1. 페이지 배경을 개선하면

해결 방법은 본문에 있습니다. 페이지를 올려도 배경은 그대로 유지됩니다.

2. 하단의 고정 레이아웃을 사용하세요. >

이 문제로 인해 페이지가 올라가고 그에 따라 하단의 수정 사항도 올라가서 해당 페이지를 덮게 됩니다. 이에 대한 해결책은 두 가지가 있습니다.

먼저, 페이지가 그에 따라 페이지가 얼마나 변경되는지 위의 페이지를 스크롤하도록 허용해야 합니다.

$('input').bind('click',function(e){
  var $this = $(this);
  e.preventDefault();
  setTimeout(function(){
    $(window).scrollTop($this.offset().top - 10);
  },200)
})

$this.offset().top 은 높이입니다. 입력 요소 중 입력할 입력 위치로 창을 스크롤

2, 고정 요소를 숨긴 후 페이지 입력이 완료되면 표시

var original = document.documentElement.clientHeight;
window.addEventListener("resize", function() {
var resizeHeight = document.documentElement.clientHeight;
if(resizeHeight != original) {
$('.bottom-button').css('display', 'none');
} else {
$('.bottom-button').css('display', 'block');
}
});

resize 속성을 이용하면 휴대폰 입력창이 뜰 때 페이지 화면이 변형되어 원래의 높이를 먼저 구하게 됩니다. 변경되면 현재 페이지 높이를 얻습니다. 페이지 높이가 다르면 요소를 숨깁니다.

위 내용은 JS는 모바일 웹 개발에서 휴대폰 입력창 팝업 관련 예제 코드를 해결합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!