HarmonyOS TextInput或TextArea如何自动获取焦点

HarmonyOS
11h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

可以使用 focusControl.requestFocus 对需要获取焦点的组件设置焦点,具体可以参考文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-focus-V5

示例代码如下:
@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController()
  @State inputValue: string = ""
  ep: number = 0;
  del:boolean = false;

  // 自定义键盘组件
  @Builder
  CustomKeyboardBuilder() {
    Column() {
      Button('关闭键盘').onClick(() => {
        // 关闭自定义键盘
        this.controller.stopEditing()
      })
      Button('删除字符').onClick(() => {
        this.inputValue = this.inputValue.substring(0, this.ep-1) + this.inputValue.substring(this.ep)
        this.del = true
      })
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.inputValue = this.inputValue.substring(0, this.ep) + item + this.inputValue.substring(this.ep)
              this.del = false
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      TextInput({ controller: this.controller, text: this.inputValue })
        // 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder())
        .margin(10)
        .id('input1') //为组件设置id,用于
        .border({ width: 1 })
          //感知光标的变化,然后调整光标位置
        .onChange(() => {
          if(this.del){
            this.controller.caretPosition(--this.ep)
          }else{
            this.controller.caretPosition(++this.ep)
          }

        })
        .onTextSelectionChange((ss) => {
          this.ep = ss;
        })
      Button("触发主动获焦")
        .width(200).height(70).fontColor(Color.White)
        .onClick(() => {
          focusControl.requestFocus('input1') // 使TextInput获焦
        })
    }
  }
}

唤起的输入法键盘类型默认是文本输入textinputtype为0,textinputtype类型可以参考如下:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-inputmethod-V5

分享
微博
QQ
微信
回复
9h前
相关问题
TextInput如何取消自动获得焦点
574浏览 • 1回复 待解决
TextInput组件获取焦点的几种场景
2658浏览 • 1回复 待解决
HarmonyOS TextInput焦点问题
404浏览 • 1回复 待解决
HarmonyOS TextInput 取消默认焦点
517浏览 • 1回复 待解决
HarmonyOS TextInput无法取消焦点
314浏览 • 1回复 待解决
如何监听TextInput是否获得焦点
1914浏览 • 1回复 待解决
HarmonyOS TextArea显示时无法自动聚焦
1浏览 • 0回复 待解决
TextInput ,TextArea无法设置字体间距
323浏览 • 1回复 待解决
HarmonyOS 如何取消TextInput自动聚焦
450浏览 • 1回复 待解决