>  기사  >  웹 프론트엔드  >  js에서 소프트 키보드가 입력 상자를 차단하는 문제를 해결하는 방법

js에서 소프트 키보드가 입력 상자를 차단하는 문제를 해결하는 방법

亚连
亚连원래의
2018-06-19 17:12:292680검색

아래에서는 소프트 키보드가 입력 상자를 차단하는 문제에 대한 js 솔루션을 권장합니다. 이는 좋은 참고 값이 있으며 모든 사람에게 도움이 되기를 바랍니다.

경험 노트

소프트 키보드가 뜰 때: ios 측의

$('body').scrollTop()이 변경됩니다

$(window).height() on 안드로이드 쪽이 바뀔거에요

키보드를 당기는 건 순간이 아닌데 여유가 생기는 과정이 있어요

문제가 다시 나타납니다

iOS 쪽에서는 입력 방식이 입력을 막는 문제가 자주 발생해요 상자(특히 흰색 상단이 있는 입력 방법: Baidu 입력 방법), 그림과 같이:

문제 해결 방법

입력 상자 후에 타이머만 시작하면 됩니다. 에 포커스를 두고 $('body').scrollTop(1000000 )을 실행하면 전체 본문이 아래쪽으로 스크롤되므로 입력 상자가 자연스럽게 표시됩니다. 자세한 내용은 다음 예제를 확인하세요

예제 소스 코드입니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
  <title>demo</title> 
  <script src="../js/jquery-1.11.3.min.js"></script>
  <style> 
    * { 
      margin: 0;  
      padding: 0; 
    } 
    body, html { 
      width: 100%; 
      height: 100%;
    } 
    .bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      font-size: 0;
    }
    input {
      font-size: 14px;
      box-sizing: border-box;
      width: 50%;
      height: 50px;
      line-height: 50px;
    }
  </style> 
</head> 
<body>
  <p class="bottom">
    <input class="aInput" type="text" placeholder="ios聚焦后会被输入法遮挡" />
    <input class="bInput" type="text" placeholder="ios聚焦后不会被输入法遮挡" />
  </p>
</body> 
<script> 
  $(function() {
    // 解决输入法遮挡
    var timer = null;
    $(&#39;.bInput&#39;).on(&#39;focus&#39;, function() {
      clearInterval(timer);
      var index = 0;
      timer = setInterval(function() {
        if(index>5) {
          $(&#39;body&#39;).scrollTop(1000000);
          clearInterval(timer);
        }
        index++;
      }, 50)
    })
  });

</script> 
</html>

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue vuex vue-rouert 권한 라우팅(자세한 튜토리얼)

Angular에서 orderBy 정렬 및 퍼지 쿼리를 구현하는 방법

Angular에서 민감한 텍스트 프롬프트를 구현하는 방법

방법 Angular에서 숨겨진 디스플레이 구현

js에서 이미지 좌우 슬라이딩 구현 방법

위 내용은 js에서 소프트 키보드가 입력 상자를 차단하는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.