HarmonyOS TextInput 组件？

Question

TextInput 组件怎么实现我想实现的功能：最多输入 n个汉字，最多输入2n个字母或者数字

也就是怎么设置可以输入的汉字个数是可以输入字母和数字的二倍

Answer 1

请参考如下demo，n=10：

import { promptAction } from '@kit.ArkUI';
@Entry
@Component
struct Index {
  @State message: string = '';
  @State msg:string=''
  @State max:number=0
  @State @Watch('change')A1num:number=0
  @State N:number=10
  @State filter:string=''
  aboutToAppear(): void {
  this.max=this.N*3
  }
  change(){
    if(this.A1num==this.max){
      promptAction.showToast({
        message:'已达输入最大数量'
      })
    }
    console.log('change')
    let a=0
    const regA=new RegExp('[a-zA-Z]')
    const reg1=new RegExp('[0-9]')
    const regHZ=new RegExp('^[\u4e00-\u9fa5]')
    for (let i = 0; i < this.A1num; i++) {
      if(regA.test(this.message[i])||reg1.test(this.message[i])){
        a++
      }
    }
    this.msg=`一共输入了${a}个字母/数字，一共输入了${this.A1num-a}个汉字`
    if (a>20){
      if(regA.test(this.message[this.A1num-1])||reg1.test(this.message[this.A1num-1])){
        // this.message[this.A1num]=
        let c:Array<string>= this.message.split('')
        this.message = c.splice(0,this.A1num-1).join('')
        console.log(this.message)
      }
      promptAction.showToast({
        message:'最多只能输入20个字母/数字，10个汉字'
      })
    }
    if(this.A1num-a>10){
      if(regHZ.test(this.message[this.A1num-1])){
        let d:Array<string>=this.message.split('')
        this.message=d.splice(0,this.A1num-1).join('')
      }
      promptAction.showToast({
        message:'最多只能输入20个字母/数字，10个汉字'
      })
    }
  }
  build() {
    Column() {
      TextInput({text:$$this.message})
        .inputFilter(this.filter)
        .maxLength(this.max)
        .onChange(()=>{
          this.A1num=this.message.length
        })
      Text(this.msg)

    }
    .height('100%')
    .width('100%')
  }
}