HarmonyOS 如何实现手机号344格式实现?

国内手机号是11位,比如13035449487,需要以344格式展示:130 3544 9487中间各加一个空格。

当前困难影响:输入手机号场景下,TextInput的type选择PhoneNumber,不支持空格,导致无法以344格式展示当前采取自定义组件的形式,通过Stack组件底下放一个TextInput,顶上放一个Text。extInput的type仍然是PhoneNumber,只是空格用-号代替,TextInput字体颜色透明,而Text展示手机号和空格。但有一个体验问题就是TextInput光标和Text显示的文案不自然,无法对齐。希望TextInput能直接支持344格式展示。

HarmonyOS
2024-10-16 11:41:43
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以使用自定义键盘组件,手动输入空格,参考代码如下:

// xxx.ets  
@Entry  
@Component  
struct TextInputExample1 {  
  controller: TextInputController = new TextInputController()  
  @State inputValue: string = ""  
  // 自定义键盘组件  
  @Builder CustomKeyboardBuilder() {  
    Column() {  
      Button('true').onClick(() => {  
        // 关闭自定义键盘  
        this.controller.stopEditing()  
      })  
      Grid() {  
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 'space', 0, 'delect'], (item:number|string) => {  
          GridItem() {  
            Button(item + "")  
              .width(110).onClick(() => {  
              if(item==="space"){  
                this.inputValue+=" "  
              } else if (item==="delect"){  
                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()).margin(10).border({ width: 1 }).height('48vp')  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-10-16 17:22:29
相关问题
PersistentStorage实现手机号登录匹配
740浏览 • 1回复 待解决
快速验证手机号Button的实现
245浏览 • 1回复 待解决
实时验证手机号Button的实现
251浏览 • 1回复 待解决
鸿蒙OS如何获取当前的手机号
24233浏览 • 1回复 待解决
华为账号登录获取不到手机号
260浏览 • 1回复 待解决
验证手机号是否已被注册/绑定功能?
3678浏览 • 1回复 待解决
HarmonyOS如何实现日期格式化转换
384浏览 • 1回复 待解决
分布跟踪如何实现
278浏览 • 1回复 待解决
沉浸图文排列布局如何实现
237浏览 • 1回复 待解决
如何实现沉浸状态栏?
366浏览 • 1回复 待解决
沉浸登录界面如何实现
168浏览 • 1回复 待解决