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

This article introduces the relevant knowledge of "how to eject and put away the mobile keyboard in html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The front-end time also started the tumultuous journey of the H6 mobile end according to the needs of the project. On the basis of the current Zhongtai, two ToC mobile projects have been extended. Here is some summary of the pop-up compatibility of the H6 mobile form page keyboard.

In the H6 project, we often encounter some form pages that automatically trigger the keyboard pop-up when the input box gets focus, but the keyboard pop-up is not consistent in the webview of IOS and Android, and there is also a difference when we actively trigger the keyboard to close.

Keyboard eject

The keyboard of the IOS:IOS system is at the top of the window. When the keyboard pops up, the height of the webview height does not change, but the scrollTop changes and the page can be scrolled. And the maximum scrolling limit of the page is the height of the pop-up keyboard, and only when the page happens to be scrolled to the bottom when the keyboard pops up, the change value of scrollTop is the height of the keyboard, which is not available in other cases. This makes it difficult to obtain the true height of the keyboard in the case of IOS.

Android: in Android, the keyboard is also at the top of the window. When the keyboard pops up, if the input box is near the bottom, it will be blocked by the keyboard, and the input box will scroll to the visual area only when you type.

Put the keyboard away

IOS: triggers the button on the keyboard to fold up the keyboard or the page area outside the input box, the input box will lose focus, so it will trigger the blur event of the input box; when the keyboard is closed, a blank area will appear at the bottom of the page and the page will be pushed up.

Android: when the button on the keyboard is triggered to close the keyboard, the input box does not lose focus, so the blur event of the page is not triggered; when an area outside the input box is triggered, the input box loses focus and triggers the blur event of the input box.

Expected result

In view of the differences when different systems trigger the keyboard to eject and fold, we want to keep the user experience as consistent as possible while the function is smooth.

an antidote against the disease

Above we have sorted out the differences between the two major systems on the market, and then we need to prescribe the right medicine to the case.

At present, there is no interface in H6 that can listen to keyboard events directly, but we can judge whether the keyboard is ejected or folded by analyzing the trigger process and manifestation of keyboard ejection and folding.

Keyboard pop-up: the keyboard pop-up action is automatically triggered when the input box gets the focus, so we can listen to the focusin event and realize the page logic needed after the keyboard pop-up.

Keyboard fold: when triggering other page areas to fold up the keyboard, we can listen to the focusout event and implement the page logic needed after the keyboard is folded. On the other hand, there is a difference between ios and android when the keyboard is closed through the keyboard button, which is analyzed in detail as follows:

IOS: the focusout event is triggered and still listens through this method.

Android: no focusout event is triggered. In android, the keyboard state switch (eject, fold) is not only associated with the input box, but also affects the change of webview height, so we can judge whether the keyboard is folded by listening for webview height changes.

System judgment

In practice, we can judge the current system through userAgent:

Const ua = window.navigator.userAgent.toLocaleLowerCase (); const isIOS = / iphone | ipad | ipod/.test (ua); const isAndroid = / android/.test (ua)

IOS processing

Let isReset = true; / / whether to reposition this.focusinHandler = () = > {isReset = false; / / the keyboard pops up when focusing. When the focus is switched between input boxes, the out-of-focus event of the previous input box is triggered first, and then the focus event of the next input box is triggered}; this.focusoutHandler = () = > {isReset = true SetTimeout (()) = > {/ / do not return if (isReset) {window.scroll (0,0) when the focus is switched between the input boxes of the pop-up layer; / / make sure that the next element is not focused after the delay, which is caused by putting away the keyboard, then force the page to be reset}}, 30);}; document.body.addEventListener ('focusin', this.focusinHandler); document.body.addEventListener (' focusout', this.focusoutHandler)

Android processing

Const originHeight = document.documentElement.clientHeight | | document.body.clientHeight;this.resizeHandler = () = > {const resizeHeight = document.documentElement.clientHeight | | document.body.clientHeight; const activeElement = document.activeElement; if (resizeHeight)

{activeElement.scrollIntoView ({block: 'center'}); / / problem with focus elements rolling to the visual area}, 0)} else {/ / Logic} after the keyboard is closed; window.addEventListener (' resize', this.resizeHandler)

React encapsulation

In react we can write a class decorator to decorate the form component.

Class decorator: the class decorator is declared before the class declaration (immediately following the class declaration). Class decorators are applied to class constructors and can be used to monitor, modify, or replace class definitions.

/ / keyboard.tsx/* * @ Description: keyboard processing decorator * @ Author: hzzly * @ LastEditors: hzzly * @ Date: 2020-01-09 09:36:40 * @ LastEditTime: 2020-01-10 12:08:47 * / import React, {Component} from 'react';const keyboard = () = > (WrappedComponent: any) = > class HOC extends Component {focusinHandler: () = > void) | undefined; focusoutHandler: () = > void) | undefined ResizeHandler: (() = > void) | undefined; componentDidMount () {const ua = window.navigator.userAgent.toLocaleLowerCase (); const isIOS = / iphone | ipad | ipod/.test (ua); const isAndroid = / android/.test (ua) If (isIOS) {/ / above IOS processing.} if (isAndroid) {/ / above Android processing.}} componentWillUnmount () {if (this.focusinHandler & & this.focusoutHandler) {document.body.removeEventListener ('focusin', this.focusinHandler); document.body.removeEventListener (' focusout', this.focusoutHandler) } if (this.resizeHandler) {document.body.removeEventListener ('resize', this.resizeHandler);}} render () {return;}}; export default keyboard

Use:

/ / PersonForm.tsx@keyboard () class PersonForm extends PureComponent {/ / business logic.} export default PersonForm; "how to eject and put away the mobile keyboard in html5" is introduced here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.