HarmonyOS 输入框关于手机号空格问题？

Question

如题：HarmonyOS 输入框关于手机号空格问题？

Answer 1

可参考下面代码：

@Entry
@Component
struct TextInputDemo {
  @State message: string = '';
  currentIndex: number = 0;
  inputChangeFlag: boolean = false;
  inputController: TextInputController = new TextInputController()
  build() {
    RelativeContainer() {
      Row() {
        Text('+86').margin({right: 8})
        TextInput({text: this.message,controller: this.inputController})
          .type(InputType.PhoneNumber)
          .enableKeyboardOnFocus(false)
          .maxLength(13)
          .inputFilter('[0-9 ]', (e) => {
            console.log(JSON.stringify(e))
          })
          .onChange((value: string) => {
            let originV = value;
            let positionInfo = this.inputController.getCaretOffset();
            let currentIndex:number = positionInfo.index;
            // 判断是否是删除空格
            let arr1 = value.split(' ');
            let arr2 = this.message.split(' ');
            if(arr1.length < arr2.length){
              // 删除了空格
              // 对value进行处理
              value = value.substring(0, currentIndex-1) + value.substring(currentIndex)
              currentIndex = currentIndex - 1;
              if(currentIndex < 0){
                currentIndex = 0;
              }
            }
            // 过滤字符串中的非数字
            value = value.replace(/[^0-9]/g, "");
            if(value.length > 7){
              value = value.substring(0, 3) + ' ' + value.substring(3, 7) + ' ' + value.substring(7);
            }else if(value.length == 7){
              value = value.substring(0, 3) + ' ' + value.substring(3, 7) + ' ';
            }else if(value.length > 3){
              value = value.substring(0, 3) + ' ' + value.substring(3);
            }else if(value.length == 3){
              value = value.substring(0, 3) + ' ';
            }
            // 检测输入是否被改变 （自动调整的数据value == originV肯定会验证通过）
            if(value == originV){
              if(this.inputChangeFlag){
                // 设置光标位置
                this.inputController.caretPosition(this.currentIndex);
                this.inputChangeFlag = false;
              }
            }else{
              this.inputChangeFlag = true;
              // 重新计算光标位置
              // 判断是否补空格
              // 获取当前位置是否是空格，或者插入数字前一个位置是空格
              let c_str= value.substring(currentIndex, currentIndex + 1);
              let c_p_str = value.substring(currentIndex-1, currentIndex);
              if(c_str == ' ' || (this.message.length < value.length && c_p_str == ' ')){
                currentIndex = currentIndex + 1;
              }
              this.currentIndex = currentIndex;
            }
            this.message = value
          })
          .width('50%')
      }.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).width('100%')
    }
    .height('100%')
    .width('100%')
  }
}