HarmonyOS 【requestFocus】如何用代码为一个TextInput获焦

比如页面中有3个TextInput分别用于填写手机号、验证码、密码。

手机号是默认聚焦的TextInput，当用户填写完手机号后，点击“获取验证码”按钮。

此时期望验证码的TextInput得到聚焦，以方便让用户填写验证码。

HarmonyOS

Heiang

2024-09-26 10:57:58

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

在HarmonyOS中，如果你希望通过代码控制 TextInput 的焦点，可以使用 requestFocus 方法。以下是一个示例，展示了如何在填写完手机号后点击“获取验证码”按钮时，自动将焦点设置到验证码的 TextInput 上。

### 示例代码

#### 创建页面包含三个 TextInput

@Entry
@Component
struct LoginPage {
    @State phoneNumber: string = ""
    @State verificationCode: string = ""
    @State password: string = ""
    private verificationCodeRef: TextInput | null = null;

    build() {
        Column({ space: 20 }) {
            // 手机号输入框，默认聚焦
            TextInput(this.phoneNumber)
                .placeholder("请输入手机号")
                .onEnterKey(() => this.handlePhoneSubmit())
                .type(InputType.Number)
                .requestFocus(true) // 默认聚焦

            // 验证码输入框
            TextInput(this.verificationCode)
                .placeholder("请输入验证码")
                .ref(el => this.verificationCodeRef = el)
                .type(InputType.Number)

            // 密码输入框
            TextInput(this.password)
                .placeholder("请输入密码")
                .type(InputType.Password)

            // “获取验证码”按钮
            Button("获取验证码")
                .onClick(() => this.handleGetVerificationCode())
        }
        .padding(20)
    }

    handlePhoneSubmit() {
        if (this.verificationCodeRef) {
            this.verificationCodeRef.requestFocus();
        }
    }

    handleGetVerificationCode() {
        // 模拟获取验证码逻辑
        console.log("获取验证码");

        // 设置焦点到验证码输入框
        if (this.verificationCodeRef) {
            this.verificationCodeRef.requestFocus();
        }
    }
}

### 说明

TextInput 的引用：

使用ref 属性获取TextInput 的引用，并存储到verificationCodeRef 中。当需要设置焦点时，通过这个引用调用requestFocus。

默认聚焦：

第一个TextInput（手机号）默认请求焦点，可以通过requestFocus(true) 来实现。

按钮点击事件：

在“获取验证码”按钮的点击事件处理方法handleGetVerificationCode 中，调用存储的verificationCodeRef 引用的requestFocus 方法，将焦点设置到验证码输入框。

处理 Enter 键事件：

为手机号输入框添加onEnterKey 事件处理器，当用户按下Enter 键时也可以将焦点切换到验证码输入框。

通过以上步骤，你可以在HarmonyOS中通过代码控制 TextInput 的焦点，以提升用户体验。

2024-09-26 19:02:33

zbw_apple

让某个输入框获取焦点可以使用sendEventByKey方法向该组件发送一个点击事件。方法如下：

//  id:要触发事件的组件的id  
// action: 点击事件Click: 10;长按事件LongClick: 11  
// params: 事件参数，无参数传空字符串 ""  
sendEventByKey(id: string, action: number, params: string): boolean

示例代码如下：

@Entry  
@Component  
struct TextInputExample {  
  @State text: string = ''  
  controller: TextInputController = new TextInputController()  
  
  build() {  
    Column() {  
      Row() {  
        TextInput({ text: this.text, placeholder: '请输入用户名', controller: this.controller })  
          .height(40)  
          .margin(20)  
          .fontSize(14)  
          .width('90%')  
          .id('t1')  
      }  
  
      Row() {  
        TextInput({ placeholder: '请输入密码' })  
          .height(40)  
          .margin(20)  
          .type(InputType.Number)  
          .maxLength(9)  
          .width('60%')  
          .id('t2')  
        Button('获取验证码')  
          .onClick(() => {  
            sendEventByKey('t2', 10, '');  
          }).width('30%')  
      }.justifyContent(FlexAlign.SpaceBetween)  
      .width('100%')  
    }  
  }  
}

2024-09-26 17:47:32

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 【requestFocus】如何用代码为一个TextInput获焦

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