HTML5 virtual keyboard appears to block the input box solution

1. Problem description

We use H5 for mobile apps or mobile website development. If the text input box is at the bottom of the entire page, when we click on the input box to enter text, the virtual keyboard popped up by the system will block the input box. (This only has this problem under the Android system, the iOS system will automatically move the entire page.)

2, the solution

We can do this with the help of the element's scrollIntoViewIfNeeded() method. After this method executes, if the current element is not visible in the viewport, the browser window or container element will be scrolled to finally make it visible. If the current element is already visible in the viewport, this method does nothing.

3. Sample code

Here, jQuery is used to bind the click events of all input boxes (textinput, textarea ), so that when the input box is clicked, its scrollIntoViewIfNeeded() method is called to ensure that the input box is visible. (Some Android phone keyboards appear slower when a delay of 400ms appears)

Prevent the keyboard from blocking the current input box
$('input[type="text"],textarea').on('click', function () {
  var target = this;
  setTimeout(function(){
        target.scrollIntoViewIfNeeded() ;
        console.log('scrollIntoViewIfNeeded');
      },400);
});