How does the applet handle keyboard overlay input box (code attached)

The content of this article is about how the mini program handles the keyboard overlay input box (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the mobile terminal, when the input box is at the bottom of the page, the keyboard will cover the input box. A similar situation also occurs in the mini program, but the mini program provides some APIs. But it cannot meet the requirements. Here is a brief introduction to the solution.

Default behavior of the applet

When the keyboard overwrites the input box, no operation is performed In the case of api, the applet will push the screen upward until the input box is just above the keyboard.

That is, if it is not processed, the keyboard of the applet will not cover the input box. But In my needs, this is not enough, because part of the page is content that needs to be displayed continuously, and I don’t want to push the page up.

So I need to solve these problems through the API of the mini program.

cursor-spacing

In a relatively normal UI design, there is actually a layer of wrapper outside the input box, and it is obvious that the default behavior of the mini program is unknown, so the result is The lower part of this layer of wrapper (below the input box) will be cut off. Then it will be very ugly.

Introduce this apicursor-spacing, set it as much as you want, and leave as much as you want below the input. This number should be' The distance from the lower edge of the input box to the end of the wrapper".

The pitfall of the applet is: the unit on the document is wrong. You need to try it to know what the meaning of this attribute is, so the wrong unit results in no effect. This makes most (most) people give up. The correct unit is a string with a unit. For example, 10px or 100rpx.

adjust-position

As I mentioned just now, I want the page to not push up, but to directly push the input box up.

So I tried this API. The default is true, set it to false. The effect becomes: when the input box is clicked, the keyboard perfectly covers the input box.

So I added cursor-spacing and found that the two APIs cannot take effect at the same time. .

So the final conclusion is: Simply using the provided API cannot meet the requirements. So you can only listen to events and do it yourself.

Solution

Ideas for manually operating the input box:

1. adjust-position is set to false.

2. The bottom style of the wrapper in the input box is tied to the local data. And set it to absolute positioning.

3. Change the position of the input box in the focus event.

4. Restore the position of the input box in the blur event.

Following this idea, I encountered several problems:

How to determine the position of the input box

Found in bindfocus The height of the keyboard can be obtained in the event. After trying, the height of the keyboard is in px. So just set the bottom value to the px height.

If the relative positioning of the input box wrapper is not at the bottom of the page , the situation is more complicated. If rpx is used as the unit, the screen width and height need to be obtained to calculate the px number. Without trouble, the layout can be adjusted so that the wrapper is positioned relative to the bottom of the page.

After changing The input box loses focus immediately after style

When this happens, the behavior is as follows: when the input box is clicked, the wrapper of the input box flashes and returns to its original position. (Because it loses focus)

After many experiments, what needs to be done is to bind a local variable to the focus attribute.

Then use wx:if to hide the input box based on whether it is focus or not, and put a fake input box , after clicking, change the focus attribute to evoke the keyboard.

Implementation code: https://github.com/cwj0417/step/blob/master/src/pages/did/index.vue

The above is the detailed content of How does the applet handle keyboard overlay input box (code attached). For more information, please follow other related articles on the PHP Chinese website!