What should I do if the input box is blocked when creating a virtual keyboard in H5?

This article mainly introduces the solution to the problem that the HTML5 virtual keyboard blocks the input box. It has a very good reference value. Let’s take a look at it with the editor.

Without further ado, please look at the code:

//防止键盘把当前输入框给挡住
$$('input[type="text"],textarea').on('click', function () {
  var target = this;
  setTimeout(function(){
        target.scrollIntoViewIfNeeded();
   },100);
});

Applicable to some Android models.

if(/Android [4-6]/.test(navigator.appVersion)) {
    window.addEventListener("resize", function() {
        if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
            window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
            },0);
        }
    })
}

【Related recommendations】

1. Html5 free video tutorial

2. About browser compatibility issues with H5 new tags Detailed explanation

3. Teach you how to use H5 to change the current url without refreshing. Detailed explanation of the example

4. Detailed explanation of the tutorial on operating the database through phonegap

5. Detailed explanation of how to use the indexedDB database in H5

The above is the detailed content of What should I do if the input box is blocked when creating a virtual keyboard in H5?. For more information, please follow other related articles on the PHP Chinese website!