Home  >  Article  >  Web Front-end  >  What should I do if the input box is blocked when creating a virtual keyboard in H5?

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

Y2J
Y2JOriginal
2017-05-22 13:55:272853browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn