집 > 기사 > 웹 프론트엔드 > 입력방법에 의해 입력창이 막히는 문제 해결

입력방법에 의해 입력창이 막히는 문제 해결

亚连원래의: 2018-06-19 17:10:144753검색

아래에서는 모바일 웹 페이지의 입력 방법으로 인해 입력 상자가 막히는 문제를 완벽하게 해결한 기사를 공유해 드리겠습니다. 좋은 참고 가치가 있으며 모든 분들께 도움이 되기를 바랍니다.

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

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 part

"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이 문서 헤드에서 요소의 위치 요소와 문서 헤드 사이의 거리를 계산하려면 창 헤드의 위치에 따라 스크롤 막대가 스크롤된 정도를 뺄 수 있습니다. 위의 내용은 해당 요소가 시각적 창 하단에 있는지 확인하는 것입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

입력방법에 의해 입력창이 막히는 문제 해결

관련 기사