HarmonyOS TextInput输入内容限制

输入手机号时，只允许用户输入0-9的数字，展示时，采用手机号的3-4-4格式（135 6655 4444）；

a.只设置.type(InputType.PhoneNumber)时，用户可以输入0-9和 ‘+’ ‘-’ ‘ ’，不满足要求；

b.设置.inputFilter(’\d| ‘})时，用户可以输入0-9和‘ ’，不满足要求；

c.设置.inputFilter(’\d’})时，用户可以输入0-9，展示内容非3-4-4格式，不满足要求；

该如何配置才能满足业务要求？

TextInput({ placeholder: '请输入手机号', text: this.inputPhoneVal })
  .type(InputType.PhoneNumber)
  .inputFilter('\\d| '})
.backgroundColor('#00000000')
  .margin({ left: 2 })
  .padding({ left: 10 })
  .maxLength(13)
  .placeholderColor('#879499')
  .height(50)
  .copyOption(CopyOptions.None)
  .fontColor('#666666')
  .fontSize('18fp')
  .flexGrow(1)
  .stateStyles({ pressed: this.onPress })
  .onChange((eventPhoneVal) => {
    try {
      let phoneArr = eventPhoneVal.split("");
      let phoneArrMark: string[] = new Array();
      for (let i = 0; i < phoneArr.length; i++) {
        if (phoneArr[i] != " ") {
          phoneArrMark.push(phoneArr[i]);
        }
      }
      if (phoneArrMark.length > 0) {
        this.showPhoneDel = true;
        if (phoneArrMark.length >= 3) {
          phoneArrMark.splice(3, 0, " ");
        }
        if (phoneArrMark.length >= 8) {
          phoneArrMark.splice(8, 0, " ");
        }
      } else {
        this.showPhoneDel = false;
      }
      let str =  ''
      phoneArrMark.forEach(val=>{
        str += val;
      })
      this.inputPhoneVal = str;
      if (this.isCanBack) {
        let ruleIndex = 0
        this.arr_ruleWinnerData = []
        this.cachePhoneListState = false
        this.arr_showDeleteBtn = false
        this.arr_WinnerData.reverse().forEach((val) => {
          if (val.startsWith(StringDataUtils.replaceAll(eventPhoneVal, " ", "")) && eventPhoneVal != "") {
            this.arr_ruleWinnerData[ruleIndex] = val
            this.cachePhoneListState = true
            ruleIndex++
          }
        })
      }
    } catch (e) {
      EpassConsole.instance.printErr(e)
    }
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

HarmonyOS

zbw_apple

2024-12-26 15:27:40

浏览

回答 1

按赞同

按时间

Heiang

demo如下：

TextInput({ text: this.text })
  .type(InputType.PhoneNumber)
  .onChange(value => {
    let telNumber: string = value.replace(new RegExp("\\D", "g"), '');
    if (telNumber.length > 11) {
      telNumber = telNumber.substring(0, 11);
    }
    console.info('...telNumber:' + telNumber);
    let tmp = '';
    if (telNumber.length <= 3) {
      tmp = telNumber;
    } else if (telNumber.length <= 7) {
      tmp = telNumber.substring(0, 3) + ' ' + telNumber.substring(3, telNumber.length);
    } else if (telNumber.length <= 11) {
      tmp = telNumber.substring(0, 3) + ' ' + telNumber.substring(3, 7) + ' ' + telNumber.substring(7, telNumber.length);
    }
    if (this.text === tmp && value.length > 0) {
      this.text = tmp + value.charAt(value.length - 1);
    }
    this.text = tmp;
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

2024-12-26 17:04:05

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS TextInput输入内容限制

订阅鸿蒙技术特刊，精选内容抢先看