Solve the problem of input box being blocked by input method

Below I will share with you an article that perfectly solves the problem of the input box being blocked by the input method in the mobile web page. It has a good reference value and I hope it will be helpful to 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 be calculated The position of the element from the head of the visual window can be subtracted by how much the scroll bar has scrolled. The above is to determine whether the element is at the bottom of the visual window.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to control the mouse to refuse to click the button in JS

How to get the current time difference using JS

How to implement object-based management of URLs in js

How to use Generator methods in JavaScript

The above is the detailed content of Solve the problem of input box being blocked by input method. For more information, please follow other related articles on the PHP Chinese website!