H5, andriod 에서 input 초점 이 소프트 키보드 에 있 을 때 input 상자 가 가 려 지 는 문제, ios 에서 input 상자 가 초점 을 잃 었 을 때 페이지 가 위로 올 라 가 는 문제, fixed 포 지 셔 닝 은 소프트 키보드 가 꺼 질 때 올 라 갑 니 다.

h5 input 상 자 를 쓸 때 흔히 볼 수 있 는 두 가지 문제 가 발생 하면 기록 하 세 요.
해결 방향

andriod 에서 input 초점 을 맞 추고 소프트 키보드 에 가 려 질 때 js 는 input 상 자 를 시각 영역 으로 들 어가 게 합 니 다

ios 가 input 에서 초점 을 잃 었 을 때 페이지 가 위로 올 라 가면 js 가 페이지 를 맨 위로 미 끄 러 지게 합 니 다

fixed 가 bottom 에 있 는 포 지 셔 닝 은 input 초점 을 맞 출 때 상대 적 인 포 지 셔 닝 relative 로 설정 하고 초점 을 잃 을 때 절대 포 지 셔 닝 fixed

로 전환 합 니 다.
해결 방법: scrollIntoView() 방법

//html
 <input name="phone" type="number" value=""
  onblur="inputBlur();" id="inp_dom" 
  placeholder="        " />

//js
//andriod         
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
if(isAndroid == true){
   $('#inp_dom').focus(function(e){
       $('.fixed-operation').css('position','relative');
       var target = this;
       target.scrollIntoViewIfNeeded();
       e.target.scrollIntoView({
           block: "center"
       }); 
   })
}

//ios         
function inputBlur(){
   var u = navigator.userAgent;
   var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
   $('.fixed-operation').css('position','fixed');
   if(isIOS && !$('#inp_dom').is(":focus")){
       window.scrollTo({top:0, left:0, behavior:"smooth"});
   }
}