What should I do if the input box on the mobile web page is blocked by the input method?

What should I do if the input box on the mobile web page is blocked by the input method? Below, the editor will share with you an article that perfectly solves the problem of the input box being blocked by the input method on mobile web pages. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

I used to make a pop-up dialog box and fill in the information. I found that when I viewed it on my mobile phone, when filling in the information in the later input box, the input box was blocked by the input method and could only be filled in blindly.

Premise

1. The pop-up dialog box is positioned with display: fixed

2. The size of the dialog box is fixed

Solution

css part

(dlg-top and dlg-bottom is the class of the dialog box, used to determine the positioning method of the dialog box)

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

js part

"deliver-dlg" Analysis of ideas for the dialog box class

//弹出对话框时，绑定的事件
//绑定输入框获取焦点事件
$(".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();

To put it simply, it is to change the positioning method of the dialog box. By default, top is used. When there is an input method, use bottom according to the situation. When the input gets focus and the window is reset (that is, the input box pops up), pay attention to binding the focus event of the input first, and then bind the window change event, because on the mobile phone, it is the input that gets the focus, and the input box pops up, causing the window to pop up. Size changes.

After the window size change event occurs, to determine whether the input box is blocked (that is, not within the visible range of the window), the method used is to use the height of the visible window ($(window).height() ) is greater than the bottom of the input box (input.offset().top+input.offset().height-document.body.scrollTop) because input.offset().top represents the position of the element from the head of the document, it must Calculate the position of the element from the head of the visual window, and then subtract how much the scroll bar has scrolled. The above is to determine whether the element is at the bottom of the visual window.

Related recommendations:

How to solve the problem of soft keyboard blocking the input box in js

Input appears when making a virtual keyboard in H5 What to do if the frame is blocked?

Solution to p always being blocked by select_Experience exchange

The above is the detailed content of What should I do if the input box on the mobile web page is blocked by the input method?. For more information, please follow other related articles on the PHP Chinese website!