아래에서는 소프트 키보드가 입력 상자를 차단하는 문제에 대한 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; $('.bInput').on('focus', function() { clearInterval(timer); var index = 0; timer = setInterval(function() { if(index>5) { $('body').scrollTop(1000000); clearInterval(timer); } index++; }, 50) }) }); </script> </html>
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
vue vuex vue-rouert 권한 라우팅(자세한 튜토리얼)
Angular에서 orderBy 정렬 및 퍼지 쿼리를 구현하는 방법
Angular에서 민감한 텍스트 프롬프트를 구현하는 방법
위 내용은 js에서 소프트 키보드가 입력 상자를 차단하는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!