JS solves the relevant example code of mobile phone input box pop-up in mobile web development

The difference between mobile web development and the PC side is that the input on the mobile phone is a soft keyboard, so there will be a problem, that is, when there is input, the keyboard will pop up, and the entire page will inevitably change. How to solve this problem? Below, the editor of Script House will share with you JS to solve the problem of the mobile phone input box popping up in mobile web development

The difference between mobile web development and the PC side is that the input on the mobile phone is a soft keyboard, so there will be The problem is that when there is input, the keyboard pops up and the entire page will inevitably change.

1. When the background of the page is increased, the background will not be enough.

The solution is in the body Set the background image. Even if the page is raised, the background will still exist.

2. Use fix layout at the bottom

This problem will cause the page to be raised and the fix at the bottom to be raised accordingly, covering the corresponding There are two solutions for this

One is to increase the page accordingly. How much the page changes should we let the page above scroll,

$('input').bind('click',function(e){
  var $this = $(this);
  e.preventDefault();
  setTimeout(function(){
    $(window).scrollTop($this.offset().top - 10);
  },200)
})

$this.offset().top is the height of the input element, scroll the window to the position of the input to be input

two , hide the fix element and then display it when the page input is completed

##

var original = document.documentElement.clientHeight;
window.addEventListener("resize", function() {
var resizeHeight = document.documentElement.clientHeight;
if(resizeHeight != original) {
$('.bottom-button').css('display', 'none');
} else {
$('.bottom-button').css('display', 'block');
}
});

Using the resize attribute, when the mobile phone input box pops up, the page screen will be deformed , resize will be executed. We first get the original height. When it changes, we get the current page height. When the page height is different, we hide the element.

The above is the detailed content of JS solves the relevant example code of mobile phone input box pop-up in mobile web development. For more information, please follow other related articles on the PHP Chinese website!