Share the solution to the problem of HTML5 virtual keyboard blocking the input box

This article mainly shares the solution to HTML5 when the 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);
});

Some Android devices Applicable type.

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);
        }
    })
}

The above is the detailed content of Share the solution to the problem of HTML5 virtual keyboard blocking the input box. For more information, please follow other related articles on the PHP Chinese website!