Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to solve the problems caused by the Hybird mobile virtual keyboard". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to solve the problems caused by the Hybird mobile virtual keyboard.

In the process of work, no matter with the native combination of Hybird H5 page or Wechat official account page will encounter when the keyboard input behavior is triggered, the page window goes up from the screen (adapted to iOS) or the page height becomes smaller (open the page in Wechat, etc.), now let's analyze the various situations and solutions.

The top-up of a page in iOS

/ / compatible ios pop-up keyboard change page problem

If (_ browser.versions.ios) {/ / determine whether it is an ios environment

$('body') .on ("blur",' input', function () {/ / it is also possible to use native js addEventListener

SetTimeout (function () {

Var scrollHeight = document.documentElement.scrollTop | | document.body.scrollTop | | 0

Window.scrollTo (0, Math.max (scrollHeight-1,0))

}, 100)

})

}

Tips:

_ browser.versions.ios is used to determine whether it is an ios environment. For more information, please see my article "judging the environment as iOS or Android". Of course, you can also use your own judgment method.

Blur when in an ios environment, clicking input or textare will trigger the virtual keyboard to pop up and change the height of the page, so when we put away the keyboard and want to restore the height of the page, it is equivalent to scrolling back to the bottom when we lose focus. (in a recent version of safair, I found that pages will be actively restored, while pages opened on Wechat's official account will not, which may be that the new version of safair has fixed this problem, while Wechat's browser kernel is still the old version of safair kernel).

SetTimeout timer is designed to look smoother when the page is restored to height, which is set independently depending on the project.

To get the vertical coordinate of the scroll bar of the current page, the document.body.scrollTop is always 0 under the standard W3C, but some kernels do not contain document.documentElement.scrollTop, so we need to get the scroll bar height like this: var scrollHeight = document.documentElement.scrollTop | | document.body.scrollTop | | 0

Window.scrollTo (xpos,ypos)

Math.max (scrollHeight-1,0)

Prevent fetching null or underfind

Android keyboard obscures the input box

/ / Android keyboard occlusion problem

If (_ browser.versions.android) {

Window.addEventListener ("resize", function () {

If (document.activeElement.tagName = = "INPUT" | | document.activeElement.tagName = = "TEXTAREA") {

Window.setTimeout (function () {

Document.activeElement.scrollIntoViewIfNeeded ()

}, 0)

}

})

}

Tips:

Resize is to listen for events triggered when the page changes. This is because the effect of Android popping up a virtual keyboard is not the same as that of ios. Android is equivalent to reducing the height of the window, so it will not appear the following blank like ios.

Document.activeElement this API contains focus to get the currently active element.

Document.activeElement.scrollIntoViewIfNeeded (); the purpose of this API is to move the bound element to the visible area, which can also be set if you also have occlusion problems in ios.

Thank you for reading, the above is the content of "how to solve the problems caused by Hybird mobile virtual keyboard". After the study of this article, I believe you have a deeper understanding of how to solve this problem caused by Hybird mobile virtual keyboard, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.