「HarmonyOS」验证码多TextInput输入框焦点自动跳转问题_鸿蒙开发验证码

需求背景：需要做一个多输入框的验证码模块，输入验证码时输入后光标会自动跳转至下一个输入框，删除验证码时会自动删除上一个输入框内容，并且光标跳转至上一个输入框内。6位验证码全部输完后进行登录请求

具体样式如下图：

具体实现效果如下图：

思路分析:

1.组件化

这个验证码输入框每个都样式和交互逻辑都非常相似，将其提取出作为组件化编写，减少代码冗余，先将单个输入框的样式进行编写

@Component
struct codeInputView {
  code: string
  keyNo: number
  keyStr: string

  build() {
    Row() {
      Column() {
        TextInput({text: this.code})
          .backgroundColor($r('app.color.smart_F5F5F5'))
          .maxLength(1)
          .type(InputType.Number)
          .align(Alignment.Center)
          .width((screenWidthPxToVp - 87)/6 - 10)
      }
      .width((screenWidthPxToVp - 87)/6)
    }
    .height(55)
    .backgroundColor($r('app.color.smart_F5F5F5'))
    .borderRadius(8)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.实现输入的时候，输入后光标跳转至下一个输入框

通过查阅开发文档和相关资料，发现可以将focusControl和key配合使用进行切换聚焦组件，切换焦点

相关资料链接

// 自定义输入框组件
@Component
struct codeInputView {
  @State code：string
  keyNo: number
  keyStr: string
  // 将code值传递到外部
  transfer: (number) => void
  // 登录请求回调
  requestAction?: ()=>void

  build() {
    Row() {
      Column() {
        TextInput({text: this.code})
          .backgroundColor($r('app.color.smart_F5F5F5'))
          .maxLength(1)
          .type(InputType.Number)
          .align(Alignment.Center)
          .width((screenWidthPxToVp - 87)/6 - 10)
          .onChange((value) => {
            if (value.length == 1) {
              // 当输入框中有验证码输入
              // 当不是最后一个输入框时，焦点跳转到下一个输入框
              if (this.keyNo != 5) {
                // 验证码赋值
                this.code = value
                // 验证码传递至外部
                this.transfer(value)
                // 切换焦点到下一个输入框
                let nextKeyNo: number = this.keyNo + 1
                let nextKeyStr = 'code' + nextKeyNo
                Log.info('nextKeyStr = ' + nextKeyStr)
                focusControl.requestFocus(nextKeyStr)
                
              } else {
              // 当最后一个输入框时，传值并且进行登录请求回调
                this.transfer(value)
                this.requestAction()
              }
            }
          })
          .onFocus(() => {
             // 获取焦点时进行日志打印查看
             Log.info('get focus = ' + this.keyStr)
          })
          // 设置输入框key值
          .key(this.keyStr)
      }
      .width((screenWidthPxToVp - 87)/6)
    }
    .height(55)
    .backgroundColor($r('app.color.smart_F5F5F5'))
    .borderRadius(8)
  }
}

// 页面代码
@Entry
@Component
export default struct VerifyLoginPage {
  private inputVerify: string = '请输入验证码'
  private hadSentToPhone: string = '已发送验证码到您的手机号'
  private code0: string
  private code1: string
  private code2: string
  private code3: string
  private code4: string
  private code5: string

  @State phone: string = ''

  onPageShow() {
    this.phone = router.getParams()?.['phone']
  }

  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Start}) {
      Image($r('app.media.back_icon'))
        .size({width: 33, height: 33})
        .onClick(() => {
          Log.info('click back button')
          router.back()
        })

      Text(this.inputVerify)
        .textStyle(25, $r('app.color.smart_24292B'), FontWeight.Medium)
        .margin({top: 32})

      Text(this.hadSentToPhone + this.phone)
        .textStyle(14, $r('app.color.smart_9DA2A5'), FontWeight.Regular)
        .margin({top: 12})

      // 验证码输入框
      Flex({direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween}) {
        codeInputView({keyNo: 0, keyStr: 'code0', transfer: (num)=>{this.code0 = num}})

        codeInputView({keyNo: 1, keyStr: 'code1', transfer: (num)=>{this.code1 = num}})
          .margin({left: 11})

        codeInputView({keyNo: 2, keyStr: 'code2', transfer: (num)=>{this.code2 = num}})
          .margin({left: 11})

        codeInputView({keyNo: 3, keyStr: 'code3', transfer: (num)=>{this.code3 = num}})
          .margin({left: 11})

        codeInputView({keyNo: 4, keyStr: 'code4', transfer: (num)=>{this.code4 = num}})
          .margin({left: 11})

        codeInputView({keyNo: 5, keyStr: 'code5', transfer: (num)=>{this.code5 = num}, requestAction: ()=>{this.loginRequest()}})
          .margin({left: 11})
      }
      .margin({top: 80})
    }
    .width('100%')
    .padding({left: 16, right: 16})
  }
  
// 登录请求
loginRequest() {
  let code = this.code0 + this.code1 + this.code2 + this.code3 + this.code4 + this.code5
  Log.info('phone = ' + this.phone)
  Log.info('code = ' + code)
  // 登录网络请求
  // xxxxxxx
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

此时，可以实现当输入后，光标可以跳转至下一个输入框中，并且可以将输入的code传递至组件外部进行存储在页面中

3.实现删除时，删除前一个输入框内容，并且光标跳转至前一个输入框中

通过日志打印发现，输入删除按钮，onChange方法无法获取到删除的value值。于是通过查看开发文档，发现可以通过onKeyEvent(event: KeyEvent) => {}方法，获取到删除指令，并且通过打印日志发现，每次点击删除按键，都会执行两次删除方法。

这在一开始非常奇怪和难受，因为我想用同样key的值递减来控制光标的移动，而每次删除时，都会往前跳两个输入框，并且输入框的内容不会删除，所以由此我想到可以一次删除方法来进行光标跳转，一次删除方法用来删除输入框的内容。

以下为更新后最终代码

@Component
struct codeInputView {
  @State code: string = ''
  keyNo: number
  keyStr: string
  transfer: (number) => void
  requestAction?: ()=>void

  build() {
    Row() {
      Column() {
        TextInput({text: this.code})
          .backgroundColor($r('app.color.smart_F5F5F5'))
          .maxLength(1)
          .type(InputType.Number)
          .align(Alignment.Center)
          .width((screenWidthPxToVp - 87)/6 - 10)
          .onChange((value) => {
            if (value.length == 1) {
              if (this.keyNo != 5) {
                let nextKeyNo: number = this.keyNo + 1
                let nextKeyStr = 'code' + nextKeyNo
                Log.info('nextKeyStr = ' + nextKeyStr)
                this.code = value
                this.transfer(value)
                focusControl.requestFocus(nextKeyStr)
              } else {
                this.transfer(value)
                this.requestAction()
              }
            }
          })
          .onFocus(() => {
             Log.info('get focus = ' + this.keyStr)
             Log.info('thisCode = ' + this.code)
          })
          // 删除验证码时执行的方法回调
          .onKeyEvent((event: KeyEvent) => {
            if (event.keyCode == KeyCode.KEYCODE_DEL) {
              // 当code值不为空时，删除code值
              if (this.code != '') {
                this.code = ''

              } else if (this.keyNo > 0) {
              // 如果不是第一个输入框，则每次递减keyNo使光标进行跳转至前一个输入框内
                let preKeyNo: number = this.keyNo - 1
                let preKeyStr = 'code' + preKeyNo
                Log.info('preKeyStr = ' + preKeyStr)
                focusControl.requestFocus(preKeyStr)
              }
            }
          })
          .key(this.keyStr)
      }
      .width((screenWidthPxToVp - 87)/6)
    }
    .height(55)
    .backgroundColor($r('app.color.smart_F5F5F5'))
    .borderRadius(8)
  }
}

// 页面代码
// 页面代码与第2点相同，在此不过多赘述
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

此次在codeInputView组件的初始化中code值有进行修改，添加了’'空字符串，这是因为通过打印日志发现，如果不进行赋值的初始化时，code值会为undefined,这个在删除code值时会非常奇怪，所以进行了设空字符串进行初始化

最终即可实现需求所要求的交互逻辑

当前HarmonyOs仍在初步学习过程中，大家如果感兴趣或者有问题可以一起沟通交流，目前在学习过程中也遇到一些HarmonyOs开发组件上的一些小bug，希望华为可以及时进行更新修复！努力并大步的发展我们国家自己的移动端系统，遥遥领先！

如果该文章对你有所帮助的话，可以点赞、收藏并关注一下！后续会持续更新更多技术内容