HarmonyOS 鸿蒙Next webview 里的输入框被键盘覆盖
HarmonyOS 鸿蒙Next webview 里的输入框被键盘覆盖
可以通过获取键盘避让区域的高度,添加到web组件底部距离上,手动抬起web组件,demo如下:
import webview from '@ohos.web.webview'
import { KeyboardAvoidMode } from ‘@kit.ArkUI’;
import window from ‘@ohos.window’;
struct B {
@State scrollHeight: number = 40;
controller: webview.WebviewController = new webview.WebviewController();
aboutToAppear() {
window.getLastWindow(getContext(this)).then(currentWindow => {
currentWindow.on(‘avoidAreaChange’, async data => {
//判断规避区是否是软键盘区域。
if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) {
return;
}
//规避区的高度。
this.scrollHeight = px2vp(data.area.bottomRect.height)+40;
})
})
};
build() {
Column() {
Text(‘客服’).height(55)
Web({
src: ‘https://web.cupdata.com/CMBANK/pub/innerMBank0417.do?method=newOnlineService&bankCode=0417’,
controller: this.controller
})
.domStorageAccess(true)
.onlineImageAccess(true)
.imageAccess(true)
.zoomAccess(false)
.javaScriptAccess(true)
//手动改变bottom值
.margin({ bottom: this.scrollHeight })
.animation({curve: Curve.EaseOut, duration: 300})
}.width(‘100%’)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>