HarmonyOS CustomDialog弹Web组件显示网页密码控件输入框输入时软键盘和弹窗异常

自定义Dialog:

@CustomDialog 
struct WebViewDialog { 
  webUrl: string = "https://xxx.xxx.org/en-US/docs/Web/HTML/Element/input/password" 
  private webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  dialogController: CustomDialogController; 
  @StorageLink(ScreenUtil.isPortraitKey)isPortrait: boolean = true; 
 
  build() { 
    Row() { 
      Web({ src: this.webUrl, controller: this.webviewController }) 
        .javaScriptAccess(true)// 允许使用 js 
        .width('100%') 
        .height('100%'); 
    }.height(this.isPortrait ? '95%' : '90%').width(this.isPortrait ? '100%' : '50%') 
  }

显示:

dialogController: CustomDialogController = new CustomDialogController({ 
  builder: WebViewDialog(), 
  alignment: DialogAlignment.BottomEnd, 
  customStyle: true 
})

加载网页以后 横屏 密码框输入任意字符, 软键盘字母输入的提示位置不对, 软键盘弹起往上压缩弹窗,软键盘收起来时弹窗不会自动恢复。

HarmonyOS
2024-08-04 18:02:57
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可以以通过监听软键盘弹出和收起,当软键盘弹出子窗口高度设置为屏幕高度-软键盘高度;软键盘收起,弹出子窗口高度为屏幕高度。参考链接https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-window-0000001820880785#ZH-CN_TOPIC_0000001820880785__onavoidareachange9

示例代码:

// 子窗口页面布局 
import {webview} from '@kit.ArkWeb'; 
import {window} from '@kit.ArkUI'; 
 
@Entry 
@Component 
export struct SubWindowPage { 
  @State webViewVisibility: Visibility = Visibility.Visible; 
  private pageWidth = 320; 
  private pageHeight = 500; 
  private controller: webview.WebviewController = new webview.WebviewController(); 
  @State flexAlign: FlexAlign = FlexAlign.Center 
  @State screenHeight: number | string = '100%' 
 
  aboutToAppear() { 
    window.getLastWindow(getContext(this)).then(currentWindow => { 
      // 监视软键盘的弹出和收起 
      currentWindow.on('avoidAreaChange', async data => { 
        let property = currentWindow.getWindowProperties(); 
        let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD); 
        this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height); 
      }); 
    }) 
  } 
  build() { 
    Stack() { 
      Column() { 
        Web({ src: $rawfile('index.html'), controller: this.controller }) 
          .javaScriptAccess(true) 
          .fileAccess(false) 
          .zoomAccess(false) 
          .domStorageAccess(true) 
          .onlineImageAccess(true) 
          .horizontalScrollBarAccess(false) 
          .verticalScrollBarAccess(false) 
          .cacheMode(CacheMode.Online) 
          .width(this.pageWidth) 
          .height(this.pageHeight) 
          .border({ radius: 6 }) 
          .visibility(this.webViewVisibility) 
          .backgroundColor(Color.Pink) 
      } 
      .justifyContent(this.flexAlign) 
      .alignItems(HorizontalAlign.Center) 
      .width('100%') 
      .height('100%') 
    } 
    .width('100%') 
    .height(this.screenHeight) 
    .backgroundColor('#999955') 
    .alignContent(Alignment.Center) 
  } 
}
分享
微博
QQ
微信
回复
2024-08-05 12:39:57
相关问题
H5页面输入框自动获焦弹起软键盘
1627浏览 • 1回复 待解决
HarmonyOS 自定义键盘不能顶起输入框
242浏览 • 1回复 待解决
HarmonyOS 输入框无法对齐
285浏览 • 1回复 待解决
HarmonyOS 弹窗不避让软键盘
391浏览 • 1回复 待解决
CustomDialog软键盘的问题
331浏览 • 1回复 待解决
如何实现弹窗软键盘的避让
1385浏览 • 1回复 待解决