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

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

具体样式如下图：

在这里插入图片描述

具体实现效果如下图：

在这里插入图片描述

思路分析:

1.组件化

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

@Component
struct codeInputView {code: stringkeyNo: numberkeyStr: stringbuild() {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配合使用进行切换聚焦组件，切换焦点

相关资料链接

// 自定义输入框组件
@Component
struct codeInputView {@State code：stringkeyNo: numberkeyStr: string// 将code值传递到外部transfer: (number) => void// 登录请求回调requestAction?: ()=>voidbuild() {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 + 1let nextKeyStr = 'code' + nextKeyNoLog.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: stringprivate code1: stringprivate code2: stringprivate code3: stringprivate code4: stringprivate 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.code5Log.info('phone = ' + this.phone)Log.info('code = ' + code)// 登录网络请求// xxxxxxx
}

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

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

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

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

以下为更新后最终代码

@Component
struct codeInputView {@State code: string = ''keyNo: numberkeyStr: stringtransfer: (number) => voidrequestAction?: ()=>voidbuild() {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 + 1let nextKeyStr = 'code' + nextKeyNoLog.info('nextKeyStr = ' + nextKeyStr)this.code = valuethis.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 - 1let preKeyStr = 'code' + preKeyNoLog.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值时会非常奇怪，所以进行了设空字符串进行初始化