HarmonyOS鸿蒙Next中如何实现在ArkUI组件InputText中使用空格分隔手机号

HarmonyOS鸿蒙Next中如何实现在ArkUI组件InputText中使用空格分隔手机号 在输入手机号的InputText控件中，使用InputType.Number或InputType.PhoneNumber中，无法在文本中使用空格强制区分开，

例如151 1234 2323的效果就无法实现。

如果输入类型改成文本，那么唤起软键盘时就不能只输入数字。

应该怎样实现我们的目标效果呢

1 回复

更多关于HarmonyOS鸿蒙Next中如何实现在ArkUI组件InputText中使用空格分隔手机号的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过TextInput组件的onChange事件监听输入内容，并使用正则表达式在输入过程中自动插入空格。例如，可以监听用户输入，当输入达到4位或8位时，自动插入空格。以下是一个简单的示例代码：

@Entry
@Component
struct PhoneNumberInput {
  @State phoneNumber: string = ''

  build() {
    Column() {
      TextInput({ placeholder: '请输入手机号', text: this.phoneNumber })
        .onChange((value: string) => {
          // 去除所有空格，然后按规则插入空格
          const cleanedValue = value.replace(/\s/g, '');
          if (cleanedValue.length <= 11) {
            this.phoneNumber = cleanedValue.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
          }
        })
    }
  }
}

这样，用户可以输入连续的手机号，系统会自动将其格式化为XXX XXXX XXXX的形式。

回到顶部