腾讯云 门户网站建设,背景图片素材,相城高端网站建设,女儿玩手机到深夜23点怎么办【关键字】
harmonyOS、键盘遮挡input#xff0c;键盘高度监听 【写在前面】
在使用API6、API7开发HarmonyOS应用时#xff0c;常出现页面中需要输入input#xff0c;但是若input位置在页面下方#xff0c;在input获取焦点的时候#xff0c;会出现软键盘挡住input情况键盘高度监听 【写在前面】
在使用API6、API7开发HarmonyOS应用时常出现页面中需要输入input但是若input位置在页面下方在input获取焦点的时候会出现软键盘挡住input情况对于这个问题这里介绍如何在input获取焦点时将input显示在键盘上方功能键盘收起时将input回归到原位即如下效果 【页面布局】
首先我们编写一个简单的页面这里直接将页面input设置在页面底部代码如下
// index.html
div classcontainerinput onfocusfoucs value{{inputVal}} placeholder请输入内容styleposition: absolute;bottom: {{keyboardHeight}}px;/input
/div 【页面样式】
简单给input设置宽高代码如下
.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;
} 【页面逻辑】
当input获取焦点时通过 ohos.window 相关接口监听键盘高度变化从而改变input位置代码如下
import window from ohos.windowexport 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));}})},
}
这样就实现输入框显示在键盘上方效果了 【参考文档】
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
