在HarmonyOS NEXT开发中请问如何令一个输入框自动失焦，并自动收起键盘？

Question

在HarmonyOS NEXT开发中请问如何令一个输入框自动失焦，并自动收起键盘？

Answer 1

失焦：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
聚焦：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
demo:

export interface routerParam { 
  pageId: string 
} 
 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  @State isFocusable: boolean = true 
  private controller: TextInputController = new TextInputController() 
  @State routerParams: routerParam = { pageId: "0" } 
 
  build() { 
    Column() { 
      TextInput({ text: $$this.message, placeholder: "请输入...", controller: this.controller }) 
        .placeholderColor("#D4D3D1") 
        .backgroundColor('#ffcf2424') 
        .width(260) 
        .borderRadius(8) 
        .id("textInput1") 
        .margin({ top: 10, bottom: 10 }) 
        .defaultFocus(this.routerParams.pageId === "1") 
        .focusable(this.isFocusable) 
      Text().id('textInput2') 
      Button("聚焦") 
        .width(200) 
        .height(45) 
        .fontSize(28) 
        .type(ButtonType.Normal) 
        .border({ width: 1, color: Color.White, radius: 8 }) 
        .margin({ top: 50, bottom: 60 }) 
        .onClick(() => { 
          this.isFocusable = true 
          let res = focusControl.requestFocus('textInput1') 
          // this.getUIContext().getFocusController().requestFocus("textInput1") 
        }) 
 
      Button("失焦") 
        .width(200) 
        .height(45) 
        .fontSize(28) 
        .type(ButtonType.Normal) 
        .border({ width: 1, color: Color.White, radius: 8 }) 
        .margin({ top: 50, bottom: 60 }) 
        .onClick(() => { 
          this.isFocusable = false 
          // this.getUIContext().getFocusController().clearFocus() 
        }) 
    } 
    .height('100%') 
    .width('100%') 
    .justifyContent(FlexAlign.Center) 
  } 
}