HarmonyOS 鸿蒙Next TextInput中输入手机号，如何实现按344长度分隔

TextInput中输入手机号，如何实现按344长度分隔。比如:xxx xxxx xxxx

phonegap100 1楼•8 天前

[@Entry](/user/Entry)

[@Component](/user/Component)

struct TextInputExample {

[@State](/user/State) text: string = ''

formatPhone(val:string){

if (val) {

console.log("1",val)

let matches = /^(\d{3})(\d{4})(\d{4})$/.exec(val)

if (matches) {

val = matches[1] + " " + matches[2] + " " + matches[3]

console.log("2",val)

}

console.log("fffffffrrr",val)

return val

}

build() {

Row(){

TextInput({text: this.text, placeholder: '请输入手机号' })

.width('70%')

.height(40)

.cancelButton({

style: CancelButtonStyle.INPUT,

icon: {

size: 45,

src: $r('app.media.icon'),

color: Color.Blue

}

})

.onChange((value: string)=>{

//在这里对字符串处理变成3-4-4

this.text = this.formatPhone(value)

console.log("fff",value)

})

Button("获取验证码")

.layoutWeight(1)

.height(40)

}

.margin({

top:20,

})

.backgroundColor(Color.Gray)

.width('90%')

.height(40)

}.width("100%")

.height(90)

.justifyContent(FlexAlign.Center)

}

方法一：麻烦在判断的地方添加一个判断当删除到第4或者第9位的时候，让val-=1 即可删除空格

方法二：使用switch 关键代码如下：

[@Entry](/user/Entry)

[@Component](/user/Component)

struct TextPage {

[@State](/user/State) message: string = 'Hello World';

[@State](/user/State) value:string = ''

controller:TextInputController = new TextInputController()

build() {

Row() {

Column() {

Text(this.value).fontSize(20)

TextInput({

placeholder:'请输入',

text:$$this.value,

controller:this.controller

}).onChange(str =>{

str = this.value.toString().replace(/ /g, '');

let len = str.length;

switch (true) {

case len > 11:

str = str.substr(0, 3) + ' ' + str.substr(3, 4) + ' ' + str.substr(7, 4);

this.value = str;

break;

case len > 7:

str = str.substr(0, 3) + ' ' + str.substr(3, 4) + ' ' + str.substr(7);

this.value = str;

break;

case len > 3:

str = str.substr(0, 3) + ' ' + str.substr(3);

this.value = str;

break;

default:

this.value = str;

}

})

}

.width('100%')

}

.height('100%')

}

您的需求是要生成344分段的手机号，中间只能以空格隔开，这边测试在删除第四位和第九位数字时，已经实现对空格的连同删除操作，如果您需要对输入的手机号进行验证后期可以使用replace(/\s/g,'')去除空格，在进行验证;其次可以用InputText的caretPosition属性设置光标的位置，或者使用getCaretOffset方法可以获得TextInput内的光标位置，参考：基础类型定义-公共定义-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

如果以上不能满足您的需求，请反馈，谢谢

更多关于HarmonyOS 鸿蒙Next TextInput中输入手机号，如何实现按344长度分隔的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼•8 天前

在HarmonyOS鸿蒙系统中，针对TextInput组件实现手机号按3-4-4长度分隔，可以通过监听文本变化，并在合适的位置插入分隔符。以下是一个实现思路：

创建TextInput组件：在XML布局文件中定义TextInput组件，用于接收用户输入的手机号。
监听文本变化：使用TextChangedListener监听TextInput的文本变化。
处理文本变化：在监听器中，根据用户输入的字符数量，动态插入分隔符。当输入达到3个字符时，插入第一个分隔符“-”；当输入达到7个字符时，插入第二个分隔符“-”。
更新TextInput内容：使用setText方法更新TextInput的内容，包含分隔符。
处理删除操作：当用户删除字符时，同样监听文本变化，并移除不必要的分隔符。

示例代码（伪代码，具体实现需根据鸿蒙API调整）：

textInput.addTextChangedListener(new TextChangedListener() {
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        String input = s.toString().replaceAll("-", ""); // 移除所有分隔符
        StringBuilder formatted = new StringBuilder();

        if (input.length() <= 3) {
            formatted.append(input);
        } else if (input.length() <= 7) {
            formatted.append(input, 0, 3).append("-").append(input, 3, input.length());
        } else {
            formatted.append(input, 0, 3).append("-").append(input, 3, 7).append("-").append(input, 7, input.length());
        }

        textInput.setText(formatted.toString());
    }
});

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html