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

场景描述

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

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

方案描述

场景一：

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

方案

1. 每个验证码都是通过text实现的，而不是textInput。
2. 在页面中写一个textInput将其隐藏，通过sendEventByKey方法将textInput的点击事件转移给text，同时给textInput绑定自定义键盘，这样点击text即可拉起自定义键盘。
3. 将输入框的值赋值给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