[HarmonyOS] When the keyboard covers the input box, the input box is displayed above the keyboard

【keyword】

harmonyOS, keyboard cover input, keyboard height monitoring

【Written in front】

When using API6 and API7 to develop HarmonyOS applications, it often appears that the input needs to be entered on the page, but if the input position is at the bottom of the page, when the input gets the focus, the soft keyboard will block the input. For this problem, here is how to input When the focus is obtained, the input is displayed above the keyboard. When the keyboard is retracted, the input is returned to the original position, that is, the following effect:

【Page Layout】

First, we write a simple page, where the page input is directly set at the bottom of the page, the code is as follows:

// index.html
<div class="container">
    <input onfocus="foucs" value="{
   
   {inputVal}}" placeholder="请输入内容"
           style="position: absolute;bottom: {
   
   {keyboardHeight}}px;"></input>
</div>

【page style】

Simply set the width and height of the input, the code is as follows:

.container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

input {
    width: 100%;
    height: 40px;
    border-radius: 10px;
}

【Page logic】        

When the input gets the focus, monitor the height change of the keyboard through the @ohos.window related interface to change the input position. The code is as follows:

import window from '@ohos.window'

export default {
    data: {
        keyboardHeight: 0,
    },
    onInit() {

    },
    foucs() {
        console.info("foucs");
        let windowClass = null;
        window.getTopWindow((err, data) => {
            if (err) {
                console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
                return;
            }
            windowClass = data;
            console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
            try {
                // 开启键盘高度变化的监听
                windowClass.on("keyboardHeightChange", (data) => {
                    console.info('Succeeded in enabling the listener for keyboard height changes. Data: ' + JSON.stringify(data));
                    let height = data.height;

                    // 键盘弹起时设置input高度
                    if (this.keyboardHeight != height) {
                        this.keyboardHeight = height % 3.8;
                        console.info("keyboardHeightChange keyboardHeight:" + this.keyboardHeight)
                    }
                })
            } catch (exception) {
                console.error('Failed to enable the listener for keyboard height changes. Cause: ' + JSON.stringify(exception));
            }
        })
    },
}

In this way, the input box is displayed above the keyboard.

【Reference Document】

https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-window-0000001477981397-V3#ZH-CN_TOPIC_0000001573929313__%E5%AF%BC%E5%85%A5%E6%A8%A1%E5%9D%97