HarmonyOS Web页面如何调起自定义键盘？

HarmonyOS

put_get

2024-09-04 11:00:14

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

自定义键盘可以参考下面示例:

Test.ets

import webview from '@ohos.web.webview' 
export interface JsbObject { openDialog: (value: string) => void } 
@Entry() 
@Component 
struct Test { 
  @State @Watch('onChangeInputValue') currentData:string = ''; 
  webviewController = new webview.WebviewController() 
  dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({ 
    currentData: $currentData 
  }) }) 
  jsbObject: JsbObject = { 
    openDialog: (value: string) => { 
      this.showDialog(this, value); 
    } 
  } 
 
  onChangeInputValue(stateName: string){ 
    console.log('111===' + this.currentData) 
    this.webviewController.runJavaScript('changeNumber("'+ this.currentData +'")') 
      .then((result) => { 
        console.log('result: ' + result); 
      }) 
  } 
 
  showDialog(context: object, value: string) { 
    // 把自定义弹窗调出来 
    this.currentData = value; 
    this.dialogController.open() 
  } 
 
  build() { 
    Column() { 
      Web({ src: "resource://rawfile/web_test.html", controller: this.webviewController }) 
        .javaScriptAccess(true) 
        .javaScriptProxy({ 
          name: "myJsb", 
          object: this.jsbObject, 
          methodList: ["openDialog"], 
          controller: this.webviewController 
        }) 
    }.width('100%').height('100%').backgroundColor(Color.Brown) 
  } 
} 
@CustomDialog 
struct CustomDialogExample { 
  @Link currentData:string 
  dialogControllerTwo: CustomDialogController | null = new CustomDialogController({ 
    builder: CustomDialogExample({currentData: $currentData}), 
    alignment: DialogAlignment.Bottom, 
    offset: { dx: 0, dy: -25 } 
  }) 
  controller?: CustomDialogController 
 
  build() { 
    Column() { 
      Button('x').onClick(() => { 
        // 关闭自定义键盘 
        if (this.controller != undefined) { 
          this.controller.close() 
        } 
      }) 
      Grid() { 
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '删除'], (item: number | string) => { 
          GridItem() { 
            Button(item + "") 
              .width(110).onClick(() => { 
              if(item == '删除'){ 
                if(this.currentData.length > 0){ 
                  this.currentData = this.currentData.substring(0, this.currentData.length-1); 
                } 
              }else{ 
                this.currentData += item 
              } 
            }) 
          } 
        }) 
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) 
    }.backgroundColor(Color.Gray) 
  } 
}

web_test.html

<!DOCTYPE html> 
  <html> 
  <head> 
  <meta charset="utf-8"> 
  <title></title> 
  <script></script> 
  </head> 
  <body> 
  <input type="text" name="number_info" readonly onclick="openWindow()" value="" style="width: 500px;height: 100px;font-size:50px;border:1px solid #f00;"> 
  <div>点击上方input框</div> 
  <!--<button onclick="openWindow()" style="width: 200px;height: 200px">前端调用JSB打开窗口</button>--> 
  <script> 
  function changeNumber(value){ 
    document.getElementsByName("number_info")[0].value = value; 
  } 
function openWindow() { 
  let value = document.getElementsByName("number_info")[0].value; 
  window.myJsb.openDialog(value) 
} 
</script> 
  </body> 
  </html>

H5中input通过JsBridge拉起自定义弹窗实现自定义键盘后，原始input失去焦点，无法控制光标。如果需要控制光标，可以在同位置渲染TextInput组件通过customKeyboard属性进行自定义键盘设置。

2024-09-04 18:13:25

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Web页面如何调起自定义键盘？

订阅鸿蒙技术特刊，精选内容抢先看