「HarmonyOS」验证码多TextInput输入框焦点自动跳转问题

news/2024/7/21 12:00:30 标签: harmonyos, 华为, ArkTs, 移动端

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

具体样式如下图：

在这里插入图片描述

具体实现效果如下图：

在这里插入图片描述

思路分析:

1.组件化

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

ArkTs">@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)
  }
}
2.实现输入的时候，输入后光标跳转至下一个输入框

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

相关资料链接

ArkTs">// 自定义输入框组件
@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
}

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

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

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

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

以下为更新后最终代码

ArkTs">@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点相同，在此不过多赘述

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

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

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

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


http://www.niftyadmin.cn/n/5304898.html

相关文章

macOS无法进入安全模式

macOS无法进入安全模式

macOS无法进入安全模式 因为T2芯片的问题，在尝试commands进入单用户模式的时候，会一闪而过，直接进入系统登陆界面 可以尝试重启电脑时候按下commandr，进入恢复模式，然后在安全实用工具的选项中将安全性调低,再次尝试…
阅读更多...
VSCode远程开发配置和SSH免密登录

VSCode远程开发配置和SSH免密登录

目录 概要远程开发插件安装开始连接SSH免密登录开发环境配置 概要 现在很多公司都是直接远程到服务器上写代码，使用远程开发，可以在与生产环境相同的环境中开发、测试和部署代码，减少因环境不同而导致的问题。本文将详细介绍如何通过VSCode连…
阅读更多...
帕金森病是否存在性别差异？

帕金森病是否存在性别差异？

帕金森病是否存在性别差异是一个值得探讨的问题。从现有的研究和临床观察来看，帕金森病对男性和女性在某些方面确实存在差异。 首先，从发病率上看，帕金森病对男性的影响是女性的两倍。这意味着在相同的时间和地域背景下，男性患上…
阅读更多...
2024年度 ROTS - 实时操作系统 Top 15

2024年度 ROTS - 实时操作系统 Top 15

RTOS（实时操作系统）。 这里说的 RTOS 并非新星球大战电影中的机器人，而是物联网设备、航空系统、空中交通管制等背后的无声协调者，就在地球上。 RTOS，或称实时操作系统，设计它们是为了更好的管理资源&…
阅读更多...
【计算机算法设计与分析】棋盘覆盖问题（C++_分治法）

【计算机算法设计与分析】棋盘覆盖问题（C++_分治法）

文章目录 题目描述测试样例算法原理算法实现参考资料 题目描述 在一个 2 k 2 k 2^k \times 2^k 2k2k个方格组成的棋盘中，若恰有一个方格与其他方格不同，则称该方格为一个特殊方格，且称该棋盘为一个特殊棋盘。显然，特殊方格在棋…
阅读更多...
Ubuntu上使用node搭建本地静态http服务器

Ubuntu上使用node搭建本地静态http服务器

1.搭建步骤 1.安装Node.js。首先确保你的Ubuntu系统已经安装了Node.js。如果没有安装，可以通过以下命令进行安装： sudo apt-get update sudo apt-get install nodejs #安装nodejs 2.安装npm。npm是Node.js的包管理器，一般会随着Node.js一…
阅读更多...
2.HDFS 架构

2.HDFS 架构

目录 概述架构HDFS副本HDFS数据写入流程NN 工作原理DN 工作原理 结束 概述 官方文档快递 环境：hadoop 版本 3.3.6 相关文章速递 架构 HDFS HDFS 架构总结如下： a master/slave architecture 一主多从架构a file is split into one or more blocks a…
阅读更多...
信息学奥赛一本通2066：【例2.3】买图书

信息学奥赛一本通2066：【例2.3】买图书

2066：【例2.3】买图书 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 105166 通过数: 61520 【题目描述】 已知小明有n元，他买了一本书，这本书原价为m元，现在打8折出售。求小明还剩多少钱(保留2位小数)。 【输入】 …
阅读更多...
最新文章

Copyright @ 2022~2023