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

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

可参考下面代码:

@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%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 适配-输入框问题
23浏览 • 1回复 待解决
HarmonyOS 手机号快速验证
61浏览 • 1回复 待解决
HarmonyOS 获取不到手机号
356浏览 • 1回复 待解决
HarmonyOS 密码输入框
47浏览 • 1回复 待解决
PersistentStorage实现手机号登录匹配
930浏览 • 1回复 待解决
快速验证手机号Button的实现
487浏览 • 1回复 待解决
实时验证手机号Button的实现
394浏览 • 1回复 待解决
HarmonyOS 输入框无法对齐
416浏览 • 1回复 待解决
HarmonyOS 修改输入框焦点
19浏览 • 1回复 待解决
HarmonyOS 输入框与软键盘问题
14浏览 • 1回复 待解决
HarmonyOS 输入框只能输入字母和数字
95浏览 • 1回复 待解决
鸿蒙OS如何获取当前的手机号
24882浏览 • 1回复 待解决
华为账号登录获取不到手机号
457浏览 • 1回复 待解决
验证手机号是否已被注册/绑定功能?
3906浏览 • 1回复 待解决
HarmonyOS 输入框不显示内容
71浏览 • 1回复 待解决