【鸿蒙实战开发】基于ArkUI的验证码实现

场景描述

场景一：基于自定义键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，拉起的键盘是自定义数字键盘，验证码的输入框带选中效果。

场景二：基于系统键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，验证码的输入框带选中效果。

方案描述

场景一：

基于自定义键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，拉起的键盘是自定义数字键盘，验证码的输入框带选中效果。

方案

每个验证码都是通过text实现的，而不是textInput。
在页面中写一个textInput将其隐藏，通过sendEventByKey方法将textInput的点击事件转移给text，同时给textInput绑定自定义键盘，这样点击text即可拉起自定义键盘。
将输入框的值赋值给text，通过text将其展示出来。

核心代码

1.写一个TextInput将其隐藏，给TextInput设置id后，在Text的点击事件中通过sendEventByKey方法将TextInput的点击事件转移到Text上，这样就可以点击Text拉起软键盘。

2.在onChange中对codeTxt进行赋值，将输入框的值赋给codeTxt，再通过codeTxt的下标进行展示。

3.对codeTxt进行监听，showMouse是一个布尔类型的数组，当前验证码处于输入状态时，将其值改为true，这样就可改变输入框的选中状态。

//展示在页面上的文本
@State @Watch('setValue') codeTxt: string = '';
@State Index: number[] = [0, 1, 2, 3, 4, 5]
//控制选中文本样式
@State showMouse: boolean[] = [];

@Builder
buildAEnterCodeInput() {
  Flex({
    direction: FlexDirection.Row,
    alignItems: ItemAlign.Center,
    justifyContent: FlexAlign.SpaceBetween
  }) {
    Column(){
      Row(){
        //text将拿到的值进行逐个展示
        Text(this.codeTxt[0])
          .fontSize(18)
          .fontWeight(600)
          .textAlign(TextAlign.Center)
          .width(50)
          .height(50)
          .margin({ left: 5, right: 5 })// .border({ width: 0.5, color:  Color.Grey ,style: BorderStyle.Solid })
            //设置验证码选中的样式
          .border(this.showMouse[this.Index[0]] ? this.btnCancelBorderActive : this.btnCancelBorder)
          .borderRadius(5)
        ……
      }
      .onClick(()=>{
        //通过sendEventByKey方法将输入框的点击事件转移给text
        sendEventByKey('TextInput',10,'')
      })
      //写一个输入框，将其隐藏
      TextInput({ controller: this.controller })
        .width('100%')
        .height(100)// .zIndex(1)
        .opacity(0)
        .id('TextInput')
        .customKeyboard(this.CustomKeyboardBuilder())
        .onChange((value) => {
          //将隐藏的输入框的value值赋值给codeTxt 
          this.codeTxt = value
          if (this.codeTxt.length >