모바일 웹페이지의 입력창이 입력방법에 의해 차단되면 어떻게 해야 하나요?

입력방법으로 인해 모바일 웹페이지의 입력창이 막히면 어떻게 해야 하나요? 아래 편집자는 모바일 웹 페이지의 입력 방법으로 인해 입력 상자가 막히는 문제를 완벽하게 해결한 기사를 공유할 것입니다. 좋은 참고 가치가 있으며 모든 분들께 도움이 되기를 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

정보를 입력하기 위해 팝업 대화 상자를 만들곤 했는데, 휴대폰에서 볼 때 나중에 입력 상자에 정보를 입력할 때 입력 방법에 의해 입력 상자가 차단되는 것을 발견했습니다. 맹목적으로만 채워질 수 있었습니다.

Premise

1. 팝업 대화 상자 위치는 표시:고정

2. 대화 상자의 크기는 고정

해결 방법

css 부분

(dlg-top 및 dlg-bottom은 대화 상자의 클래스로, 대화 상자의 위치 지정 방법을 결정하는 데 사용됩니다.)

.dlg-top{
 position: fixed;
 top:100px;
 left:10%;
}
.dlg-bottom{
 position: fixed;
 bottom:0px;
 left:10%;
}

js 부분

"deliver-dlg"는 대화 상자의 클래스입니다. 대화 상자

//弹出对话框时，绑定的事件
//绑定输入框获取焦点事件
$(".deliver-dlg input,.deliver-dlg textarea").focus(function(){
 var input=$(this);
 //在输入框获取焦点后，窗口改变的话，执行事件
 $(window).resize(function(){
  //判断当前输入框是否在可视窗口之外（下面）
  if($(window).height()-(input.offset().top+input.offset().height-document.body.scrollTop)<0){
   //对话框定位方式改为bottom
   $(".deliver-dlg").removeClass("dlg-top").addClass("dlg-bottom");
  }
  else{
   $(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
  }
 });
});
//取消对话框时，取消事件绑定
$(".deliver-dlg input").unbind();
$(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
$(window).unbind();

생각해 보세요

간단히 말하면 대화 상자의 위치 지정 방법을 변경한다는 의미로 기본적으로 입력 방법이 있을 경우 상황에 따라 하단을 사용합니다. . 입력이 포커스를 받고 창이 재설정되면(즉, 입력 상자가 팝업됨) 먼저 입력의 포커스 이벤트 바인딩에 주의한 다음 창 변경 이벤트를 바인딩합니다. 포커스를 받은 입력과 입력 상자가 팝업되어 창이 팝업됩니다. 크기가 변경됩니다.

창 크기 변경 이벤트가 발생한 후 입력 상자가 차단되었는지(즉, 창이 보이는 범위 내에 있지 않은지) 확인하기 위해 사용되는 방법은 보이는 창의 높이($(window). height())를 사용하여 입력보다 큰지 확인합니다. input.offset().top이 문서 헤드에서 요소의 위치 요소의 거리를 계산하려면 창 헤드의 위치에 따라 스크롤 막대가 스크롤된 정도를 뺄 수 있습니다. 위의 내용은 해당 요소가 시각적 창 하단에 있는지 확인하는 것입니다.

관련 추천:

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

H5에서 가상 키보드를 만들 때 입력 상자가 막히면 어떻게 해야 하나요?

p는 항상 선택솔루션으로 차단됩니다_체험교환

위 내용은 모바일 웹페이지의 입력창이 입력방법에 의해 차단되면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!