Do you really fully understand the keyboard controls for the Input component? — Baidu intelligent applets Input component principle analysis and keyboard behavior description

In many development scenarios of Baidu intelligent small program, we will use the Input box component. In the process of operating the input box, it is also very important to deal with the pop-up and folding behavior of the keyboard correctly. Keyboard behavior not only needs to be perfectly suited to the business scenario, but also relevant to the user experience.

So, do you really fully understand the keyboard controls for the Input component?

Check out the developer community for more

More Job information

Use of the Input component

In the development process of intelligent small program, developers control the keyboard by using the focus and blur attributes of the Input component, so that when the user clicks the Input box, the keyboard pops up. The effect of the keyboard collapsing when the user clicks on a blank area.

So what did the smart applet component developer do when developing the Input component?

Let’s take a closer look at how the Input component works.

The underlying processing of focus/bindblur in the Input component

Since the Input component of Baidu intelligent applet is developed based on same-layer rendering, we first need to understand what same-layer rendering technology is.

Before we talk about same-layer rendering, we need to understand what native components are.

The native components

Native components are a special class of built-in components in applets that are rendered by native clients, as opposed to WebView rendered built-in components.

What are the advantages of native components?

• Native components provide a smoother native experience and richer controls.

• It provides some functions that H5 components cannot realize, such as H5 Video does not support Video format preference, Canvas does not support drawing local pictures, and Input cannot adjust the id card keyboard customized by the client, etc.

• Using native controls reduces the flow of H5 components interacting with Objective-C (side) using JS and reduces communication overhead.

But there are limitations to native components:

The hierarchy of native components is the highest. No matter how much z-index is set to any other H5 component on the page, the native component cannot be overwritten, and the native component inserted later can overwrite the previous native component. The effects are as follows:

• Overwriting custom HTML elements on native controls is not supported.

• All H5 pop-up elements are blocked by native controls such as Alert, Toast, and so on.

How can you take advantage of native components while avoiding these limitations? Same-layer rendering technology was born.

The relationship of the same layer rendering to native components

Same-layer rendering refers to the direct rendering of the native components to the WebView hierarchy through certain technical means. At this time, the native components have been directly mounted to the WebView node, and the native components of the same layer can be used as non-native components.

Focus to deal with

We’ve seen the concept of same-layer rendering above, and the Input component is implemented using same-layer rendering, but there are some differences between IOS and Android.

• The Android Input component is a pure H5 component, handled by both the front end and the kernel. The CAPABILITY of the NA terminal is actually to communicate with the NA terminal through the API, which is then handled by the client, for example, to enable the custom keyboard function.

• The whole process of the Input component of IOS is an NA component. When the focus is not obtained, the NA component is a node in the DOM tree. The difference between this node and other front-end component nodes is that it is an NA component. When the NA component gets focus, the view tree relationship of the NA component changes and it no longer inherits from the DOM tree, but is a child node of the client Webview component. When the focus is lost again, the NA component is put back into the DOM tree. The following figure takes IOS processing as an example:

1. The Input component first receives the focus value from the developer and stores it in the focus variable.
2. Then set the focus variable to true when the user clicks.
3. Secondly, the Input INSERT side is adjusted to communicate with the end and insert the Input label. The bottom layer of the component triggers the bindFocus method. After losing the focus, the bindBlur method is triggered.
4. Finally, the underlying set focus to the client return value. The Input native component is destroyed when the blur method is triggered.

Note that when bindConfirm is triggered, two events are triggered: Confirm and blur. The sequence of the two events is different between IOS and Android. On IOS, Confirm is triggered first and then Blur is triggered. On Android, blur triggers first and then Confirm triggers.

Tips

Here are some tips for using the Input component to help you avoid some experience issues.

1. Avoid switching focus quickly.

The following code snippet causes the keyboard to bounce twice, causing experience problems.

// badcase
data: {
    focus: true
}
searchFocus(e) {
    this.setData({
        focus: false= > {}, ()this.setData({
            focus: true
        });
    });
}

// goodcase
data: {
    focus: true
}
searchFocus(e) {
    this.setData({
        focus: true
    });
}
Copy the code

2. Don’t abuse variables like blur.

The client automatically responds to basic keyboard actions, so developers don’t need to manually maintain blur values in the bindBlur event.

// badcase
data: {
    blur: false
}
searchBlur(e) {
    // Change blur state without logic related to blur
    this.setData({
        blur: true
    });
}
Copy the code

Finally, thank you for your active participation in the development of Baidu small program, any problems in the development process can be in the community to interact with the official or other developers, you can also send your comments to [email protected], looking forward to your participation!