前言
本文基于Api12
动态的输入框很是常见，比如支付宝或者微信，在你发红包或者转账输入密码的时候，当输入完上一个，自动就切换到了下一个，当然了除了支付密码的场景之外，很多验证码的输入也是通过这种方式实现的，可以说，用的场景很多。
在鸿蒙开发中，如何实现这一效果呢，最重要的解决两个问题，第一个问题是，如何在上一个输入框输入完之后，焦点切换至下一个输入框中，第二个问题是，如何禁止已经输入的输入框的焦点，两个问题解决完之后，其他的就很是简单了。
本篇的大纲如下：
1、实现效果一览
2、绘制输入框
3、如何切换焦点
4、如何禁止焦点
5、开源组件超简单使用
6、相关总结
一、实现效果一览
最终完成的是一个组件，可以在任意的地方进行使用，我简单的写了几个实现的效果，当然了可以根据属性，实现多种且不同的样式。
静态效果
动态效果
二、绘制输入框
输入框没什么好说的，就是使用的TextInput组件，实际的场景中，其输入框的数量肯定是动态的，所以这里使用的是Grid组件展示一行，使用Grid的一个便利之处，除了均分简单配置列之外，还有一点，是方便控制列与列之间的距离；当然了使用其他的组件也没问题的。
Grid() {
ForEach(this.inputBoxArray, (_: number, index: number) => {
GridItem() {
TextInput()
}
})
}.columnsTemplate("1fr ".repeat(this.inputBoxSize).trimEnd())
.rowsTemplate("1fr")TextInput组件，除了正常的样式属性之外，我们需要监听输入内容的变化，通过onChange方法即可，在onChange方法中，我们需要做的是，存储每一个输入的内容，用于返回至业务层，当然了还需要判断，当前是否存在内容，如果存在，那么焦点就切换至下一个。
if (value != undefined && value != "" && index < this.inputBoxSize) {
this.inputBoxTextArray[this.lastPosition] = value //赋值内容
this.inputBoxVisibilityArray[this.lastPosition] = false
if (index != this.inputBoxSize - 1) {
this.lastPosition = index + 1
this.inputBoxVisibilityArray[this.lastPosition] = true
this.moveFocus(this.lastPosition)
} else {
this.inputBoxVisibilityArray[this.lastPosition] = false
}
}三、如何切换焦点
在绘制TextInput组件的时候，每个组件定义一个id，可以使用FocusController控制器，把焦点移动至下一个id的组件之上。
/**
* AUTHOR:AbnerMing
* INTRODUCE:移动焦点
* */
private moveFocus(index: number) {
this.getUIContext().getFocusController().requestFocus(this.inputViewIds + index)
}四、如何禁止焦点
在实际的开发中如果我们动态的取消焦点或者禁止点击等方式实现，会发现输入框确实不可点击，但是会出现软键盘收起再弹出的问题，那么为了解决多输入框使用同一个软键盘，这里我用到了一个浮层，也就是已经输入过的输入框使用透明的浮层覆盖，这样就无法触摸了。
五、开源组件超简单使用
以上呢只是实现的思路，通过这种思路，已经完成了输入框的动态输入，目前已经提交至了中心仓库，大家可以下载使用。
https://ohpm.openharmony.cn/#/cn/detail/@abner%2Finput_box
1、远程依赖
方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
建议：在使用的模块路径下进行执行命令。
ohpm install @abner/input_box方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：
"dependencies": { "@abner/input_box": "^1.0.0"}2、代码使用
1、普通使用
InputBoxView({
inputBoxSize: 5,
onChange: (value) => {
console.log("===输入监听：" + value)
},
onInputEnd: (value) => {
console.log("===输入结果：" + value)
}
})2、光标颜色
InputBoxView({
inputBoxSize: 6,
caretColor: Color.Red,
onChange: (value) => {
console.log("===输入监听：" + value)
},
onInputEnd: (value) => {
console.log("===输入结果：" + value)
}
})3、边框模式
InputBoxView({
inputBoxSize: 6,
caretColor: Color.Red,
inputBoxBgColor: Color.Transparent,
inputBoxBorderWidth: 1,
isInputBoxBorder: true,
inputBoxNormalBorderColor: Color.Black,
inputBoxSelectBorderColor: Color.Red,
onChange: (value) => {
console.log("===输入监听：" + value)
},
onInputEnd: (value) => {
console.log("===输入结果：" + value)
}
})4、显示底部光标
InputBoxView({
inputBoxSize: 6,
caretColor: Color.Red,
inputBoxBgColor: Color.Transparent,
inputBoxBorderWidth: 1,
isInputBoxBorder: true,
isShowBottomCaret: true, //显示底部光标
inputBoxNormalBorderColor: Color.Black,
inputBoxSelectBorderColor: Color.Red,
onChange: (value) => {
console.log("===输入监听：" + value)
},
onInputEnd: (value) => {
console.log("===输入结果：" + value)
}
})5、圆点
InputBoxView({
inputBoxSize: 6,
inputTextType: InputTextType.ROUND,
onChange: (value) => {
console.log("===输入监听：" + value)
},
onInputEnd: (value) => {
console.log("===输入结果：" + value)
}
})6、星号
InputBoxView({
inputBoxSize: 6,
inputTextType: InputTextType.ASTERISK,
onChange: (value) => {
console.log("===输入监听：" + value)
},
onInputEnd: (value) => {
console.log("===输入结果：" + value)
}
})7、设置边框选择颜色
InputBoxView({
inputBoxSize: 6,
inputBoxNormalBorderColor: "#e8e8e8",
inputBoxSelectBorderColor: Color.Blue,
inputBoxBorderWidth: 1,
boxInputHideBgColor: true,
onChange: (value) => {
console.log("===输入监听：" + value)
},
onInputEnd: (value) => {
console.log("===输入结果：" + value)
}
})8、设置边框下划线方式
InputBoxView({
inputBoxSize: 6,
inputBoxBgColor: Color.Transparent,
inputBoxBorderWidth: { bottom: 2 },
inputBoxNormalBorderColor: Color.Black,
inputBoxSelectBorderColor: Color.Black,
onChange: (value) => {
console.log("===输入监听：" + value)
},
onInputEnd: (value) => {
console.log("===输入结果：" + value)
}
})9、设置边框下划线圆点方式
InputBoxView({
inputBoxSize: 6,
inputTextType: InputTextType.ROUND,
inputBoxBgColor: Color.Transparent,
inputBoxBorderWidth: { bottom: 2 },
inputBoxNormalBorderColor: Color.Black,
inputBoxSelectBorderColor: Color.Black,
onChange: (value) => {
console.log("===输入监听：" + value)
},
onInputEnd: (value) => {
console.log("===输入结果：" + value)
}
})3、属性介绍
| 属性 | 类型 | 概述 |
|---|---|---|
| inputBoxSize | number | 输入框数量，默认为6个 |
| inputBoxWidth | Length | 每个输入框的宽度，默认为100% |
| inputBoxHeight | Length | 每个输入框的高度，默认为100% |
| inputBoxBgColor | ResourceColor | 输入框的背景 |
| inputType | InputType | 键盘类型，默认为InputType.Number |
| inputBoxGap | Length | 输入框之间的间隙，默认为10 |
| inputWidth | Length | 输入框整体的宽度 |
| inputHeight | Length | 输入框整体的高度 |
| inputBoxBorderRadius | Length | 圆角 |
| inputBoxBorderWidth | EdgeWidths/Length/LocalizedEdgeWidths | 边框大小 |
| inputBoxNormalBorderColor | ResourceColor | 输入框选中边框背景 |
| inputBoxSelectBorderColor | ResourceColor | 输入框未选中边框背景 |
| inputMarginLeft | Length | 输入框整体距离左边的距离 |
| inputMarginRight | Length | 输入框整体距离右边的距离 |
| caretColor | ResourceColor | 光标颜色 |
| boxCaretWidth | Length | 光标宽度 |
| inputFontColor | ResourceColor | 字体颜色 |
| inputFontSize | Length | 字体大小 |
| inputFontWeight | umber/FontWeight/string | 字体权重 |
| inputFontStyle | FontStyle | 字体样式 |
| fontFamily | ResourceStr | 字体列表 |
| openRowClick | boolean | 是否打开行点击 |
| inputTextType | InputTextType | 显示内容类型 |
| boxInputHideBgColor | boolean | 最后的一个背景是否隐藏，默认不隐藏 |
| isShowBottomCaret | boolean | 光标是否显示底部，默认不展示 |
| isInputBoxBorder | boolean | 是否是边框，默认不是 |
| onChange | (value: string) => void | 输入回调监听 |
| onInputEnd | (value: string) => void | 输入结束 |
六、相关总结
除了动态的把焦点切换至下一个之外，我们在点击软键盘删除的时候，也需要把输入框的内容清空以及切换焦点至上一个，如何监听软键盘的删除按钮，这个可费了一番功夫，执行onKeyEvent事件，发现只走电脑的按键，模拟器的软键盘不会走，以为是模拟器的问题，切换到真机上，删除按钮也不会走。最后不断地排查，发现了一个方法是必走的，那就是onWillDelete，大家在自己实现的时候，可以使用这个方法，可以少走弯路。
