Android 소프트 키보드 팝 업 덮어 쓰기 h5 페이지 입력 상자 문제 해결

5373 단어 android소프트 키보드팝 업h5페이지입력 상자
이전에 vue 를 사용 하여 h5 폼 을 입력 하 는 과정 에서 안 드 로 이 드 소프트 키보드 팝 업,h5 페이지 입력 상 자 를 덮어 쓰 는 문제 가 발생 했 습 니 다.여기 서 돌 이 켜 보고 공유 합 니 다.
시스템:Android
조건:입력 상자 가 시각 영역 아래쪽 이나 비 뚤 어 진 위치 에 있 을 때
트리거 조건:입력 상자 에서 초점 가 져 오기,소프트 키보드 팝 업
표현:소프트 키보드 가 h5 페이지 의 입력 상 자 를 덮어 씁 니 다.
문제 분석:
1.문제 발견:현재 페이지 의 box 는 flex 레이아웃 이 고 내용 은 상하 고정 이 높 으 며 중간 적응(중간 구역 의 내용 이 너무 많 으 면 스크롤 바 가 나타 날 수 있 습 니 다.input 상 자 는 wrapper 의 아래쪽 에 있 습 니 다),input 은 초점 을 얻 고 핸드폰 키보드 가 팝 업 되 며 input 은 시각 영역 으로 올 라 가지 않 아 flex 레이아웃 으로 인 한 것 으로 의심 합 니 다.
h5 페이지 테스트 코드 는 다음 과 같 습 니 다.

<html lang="en"> 
 <head>  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>  <style>   html,body{    
    width:100%;    
    height:100%;    
    margin:0;    
    padding:0;   
   }   .box{    
    display:flex;    
    flex-direction:column;    
    width:100%;    
    height:100%;   
   }   .header{    
    height:50px;    
    width:100%;    
    background:#368CDA;    
    text-align:center;    
    line-height:50px;    
    font-size:20px;    
    color:#fff;   
   }   .wrapper{    
    flex:1;    
    overflow:auto;    
    width:100%;   
   }   .content {    
    margin:0;    
    padding:0;   
   }   .content li{    
    margin:0;    
    padding:0;    
    list-style:none;    
    height:150px;    
    background:#FFCC99;    
    text-align:center;    
    line-height:150px;    
    font-size:20px;    
    color:#fff;   
   }   .content li:nth-child(2n){    
    background:#CC99CC   
 }  
     .t-input{    
    width:300px;    
    height:50px;    
    border:1px solid #FF0000;   
   }   .footer{    
    width:100%;    
    height:48px;    
    background: #368CDA;    
    text-align:center;    
    line-height:48px;    
    font-size:18px;    
    color:#fff;   
   }  
 </style> 
 </head> 
 <body>
  <div class="box">   
 <div class="header">  </div>  
  <div class="wrapper">    
 <ul class="content">    
 <li>   </li>    
 <li>   </li>    
 <li>   </li>    
 <li>   </li>    
 <li>   </li>  
 </ul>    
 <input type="text" class="t-input" placeholder="   ">  
 </div>   
 <div class="footer">  </div> 
  </div> 
 </body>
</html>
2.레이아웃 수정:box 의 flex 레이아웃 을 제거 하고 wrapper,footer 를 position:absolute 방식 으로 페이지 에 위치 시 킨 결과 input 가 여전히 위로 이동 하지 않 고 flex 레이아웃 과 무관 하 다 고 판단 합 니 다.코드 수정 은 다음 과 같 습 니 다.

<style> 
 .box{ /*display:flex; flex-direction:column;*/  
 width:100%;  
 height:100%;  
 position:relative; } 
 .wrapper{/*flex:1; */ 
 overflow:auto;  
 width:100%;  
 //       top、bototm，  wrapper，      header footer       
 position:absolute;  
 top:50px;  
 bottom:48px; 
} 
.footer{ width:100%;  height:48px;  background: #368CDA;  text-align:center;  line-height:48px;  font-size:18px;  color:#fff;  position:absolute;  bottom:0; } 
</style>
3.팩시밀리 시 뮬 레이 션:팩시밀리 와 컴퓨터 연결 디 버 깅 을 하고 크롬 을 켜 는chrome://inspect(아래 그림 에서 보 듯 이)키보드 가 꺼 지지 않 았 을 때 html 높이 는 512 px 이 고 키보드 가 꺼 진 후 html 높이 는 288 px(줄 어 든 구역 은 소프트 키보드 구역)입 니 다.html,body 가 height:100%의 자가 적응 구 조 를 설정 한 후에화면 높이 에 따라 높이 가 바 뀌 어서 생 긴 것 입 니 다.

4.코드 디 버 깅:body 의 height:100%를 제거 하고 body 에 소프트 키보드 가 튀 어 나 와 입력 상 자 를 가 릴 수 있 는 높이 를 추가 합 니 다.body 높이=288(소프트 키보드 가 나타 난 후 html 높이)+50(입력 상자 높이)+48(버튼 높이 저장)키보드 팝 업 이 input 를 가 리 는 것 을 발견 하면 input 상 자 는 자동 으로 시각 영역 으로 올 라 가 문제 포 지 셔 닝 에 성공 합 니 다.
해결 방안:
프로젝트 1    페이지 렌 더 링 이 완 료 된 후 JS 동적 으로 화면 시각 영역 높이 를 가 져 옵 니 다(주:화면 이 회전 하면 화면 높이 를 다시 가 져 오고 값 을 부여 해 야 합 니 다).그리고 이 를 body 의 height 에 할당 합 니 다.그러면 body 의 높이 는 화면의 높이 입 니 다.소프트 키보드 가 꺼 지면 body 를 위로 밀어 줍 니 다(body 가 고정 높이 가 있 기 때문에 html 의 자가 적응 높이 를 계승 하지 않 습 니 다).입력 상 자 를 시각 영역 에 설치 합 니 다.코드 는 다음 과 같 습 니 다.

document.body.style.height = window.screen.availHeight +'px';
방안 2    우 리 는 요소 의 scrollIntoViewIfNeeded（） 방법 을 빌 릴 수 있 습 니 다.이 방법 을 실행 한 후에 현재 요소 가 시각 영역 에서 보이 지 않 으 면 브 라 우 저 창 이나 용기 요 소 를 스크롤 하여 최종 적 으로 볼 수 있 습 니 다.만약 에 현재 요소 가 시각 영역 에 있다 면 이 방법 은 아무것도 하지 않 습 니 다.코드 는 다음 과 같 습 니 다.

window.addEventListener('resize', () => { 
 if (document.activeElement.tagName == 'INPUT') {  
  //          Android              window.setTimeout(() => {   
   document.activeElement.scrollIntoViewIfNeeded();  
 }, 100); 
} });
총결산
위 에서 말 한 것 은 안 드 로 이 드 소프트 키보드 팝 업 이 h5 페이지 입력 상 자 를 덮어 쓰 는 문 제 를 해결 하 는 데 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
안 드 로 이 드 중력 감지 개발 의 위 챗 흔 들 기 기능
Android 는 ViewPager 를 기반 으로 위 챗 페이지 전환 과 유사 한 효 과 를 구현 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage