HarmonyOS ArkUI使用TextInput输入phoneNumber怎么自动空格？

Question

如题：HarmonyOS ArkUI使用TextInput输入phoneNumber怎么自动空格？

Answer 1

建议用自定义键盘，需要手动空格，删除时光标聚焦到当前位置。

参考代码：

@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController()
  @State inputValue: string = ""

  // 自定义键盘组件
  @Builder CustomKeyboardBuilder() {
    Column() {
      Button('确认').onClick(() => {
        // 关闭自定义键盘
        this.controller.stopEditing()
      })
      Grid() {
        ForEach([1,2,3,4,5, 6, 7, 8, 9, '空格',0,"删除"], (item:number|string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              if(item==="空格"){
                this.inputValue+=" "
              }else if (item==="删除"){
                console.log(this.inputValue.length.toString());
                this.inputValue = this.inputValue.slice(0, -1);
              }else{
                this.inputValue += item
              }
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }
  build() {
    Column() {
      TextInput({ controller: this.controller, text: this.inputValue })
        // 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder()).border({ width: 1 })
    }
  }
}