HarmonyOS 短信校验控件

import inputMethod from '@ohos.inputMethod'; 
import { BusinessError } from '@ohos.base'; 
@Entry 
@Component 
export struct TextInputPage { 
  @State codeTxt: string = ''; 
  @State screenWidth: number = 0; 
  private inputController: inputMethod.InputMethodController = inputMethod.getController(); 
  private isAttached: boolean = false; 
  private keyboardStatus: number = 0; // 默认是none， 1是hide，2是show 
  aboutToAppear(): void { 
    console.info('ImsaKit aboutToAppear') 
    this.screenWidth = 1080; 
  } 
  onPageShow(): void { 
  } 
  @Builder 
  componentBuilder() { 
    Column() { 
      Blank().height(42) 
      this.buildTitleName() 
      Blank().height(38) 
      this.buildNumTip() 
      this.buildAEnterCodeInput() 
      Blank().height(20) 
    } 
    .margin({ top: 10 }) 
    .borderRadius(8) 
    .backgroundColor(Color.White) 
  } 
  @Builder 
  buildTitleName() { 
    Row() { 
      Text() { 
        Span('输入验证码') 
          .fontSize(18) 
          .fontWeight(600) 
          .fontColor(Color.Black) 
      } 
    }.width('100%').justifyContent(FlexAlign.Start).padding({ left: 20, right: 20 }) 
  } 
  @Builder 
  buildNumTip() { 
    Row() { 
      Text() { 
        Span('已发送至') 
          .fontSize(12) 
          .fontWeight(400) 
          .fontColor(Color.Grey) 
      } 
      Blank().width(5) 
      Text() { 
        Span('182XXXXX055') 
          .fontSize(12) 
          .fontWeight(500) 
          .fontColor(Color.Black) 
      } 
    }.width('100%').justifyContent(FlexAlign.Start).padding({ left: 20, right: 20 }) 
  } 
  @Styles 
  fancyUse(){ 
    .width((this.screenWidth - 110) / 6) 
    .height('100%') 
    .margin({ left: 5, right: 5 }) 
    .border({ 
      width: { bottom: 0.5 }, 
      color: { bottom: Color.Grey }, 
      style: { bottom: BorderStyle.Solid } 
    }) 
  } 
  @Builder 
  buildAEnterCodeInput() { 
    Flex({ 
      direction: FlexDirection.Row, 
      alignItems: ItemAlign.Center, 
      justifyContent: FlexAlign.SpaceBetween 
    }) { 
      Text(this.codeTxt[0]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
      Text(this.codeTxt[1]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
      Text(this.codeTxt[2]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
      Text(this.codeTxt[3]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
      Text(this.codeTxt[4]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
      Text(this.codeTxt[5]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
    } 
    .backgroundColor(Color.White) 
    .height(50) 
    .margin({ left: 15, right: 15 }) 
    .id('customInput') 
    .defaultFocus(true) 
    .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => { 
      console.info('ImsaKit Test Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio) 
      if (isVisible && currentRatio >= 1.0) { 
        console.info('ImsaKit Test Text is fully visible. currentRatio:' + currentRatio) 
        if(!this.isAttached){ 
          this.attachAndListener(); 
        }else{ 
          console.info('in focus') 
          focusControl.requestFocus('customInput') 
        } 
      } 
      if (!isVisible && currentRatio <= 0.0) { 
        console.info('ImsaKit Test Text is completely invisible.') 
        // this.dettach() 
      } 
    }) 
    .onClick(async () => { 
      console.info('ImsaKit keyboardStatus =' + this.keyboardStatus) 
      if (this.isAttached && this.keyboardStatus != 2) { 
        // 输入法配置项 
        let textConfig: inputMethod.TextConfig = { 
          inputAttribute: { 
            textInputType: inputMethod.TextInputType.NUMBER, 
            enterKeyType: inputMethod.EnterKeyType.GO 
          } 
        }; 
        // 控件绑定输入法 
        await this.inputController.attach(true, textConfig) 
        return 
      } 
    }) 
  } 
  dettach() { 
    this.inputController.off('insertText'); 
    this.inputController.off('deleteLeft'); 
    this.inputController.off('sendKeyboardStatus'); 
    this.inputController.detach((err: BusinessError) => { 
      if (err) { 
        console.error(`Failed to detach: ${JSON.stringify(err)}`); 
        return; 
      } 
      this.isAttached = false 
      console.log('Succeeded in detaching inputMethod.'); 
    }); 
  } 
  // 绑定和设置监听 
  async attachAndListener() { 
    // 输入法配置项 
    let textConfig: inputMethod.TextConfig = { 
      inputAttribute: { 
        textInputType: inputMethod.TextInputType.NUMBER, 
        enterKeyType: inputMethod.EnterKeyType.GO 
      } 
    }; 
    // 控件绑定输入法 
    await this.inputController.attach(true, textConfig) 
    console.info('come in') 
    this.isAttached = true 
    this.attachListener() 
    console.info('attach succeed') 
  } 
  /** 
   * 订阅输入法回调 
   */ 
  attachListener(): void { 
    // 订阅输入法应用插入文本事件 
    this.inputController.on('insertText', (text) => { 
      if (this.codeTxt.length >= 6) { 
        return 
      } 
      this.codeTxt += text; 
      console.info('this.inputText', 'insertText this.inputText===' + this.codeTxt) 
    }) 
    // 订阅输入法应用向左删除事件 
    this.inputController.on('deleteLeft', (length) => { 
      this.codeTxt = this.codeTxt.substring(0, this.codeTxt.length - length); 
      console.info('this.inputText', 'deleteLeft  this.inputText===' + this.codeTxt) 
    }) 
    // 订阅输入法应用发送输入法软键盘状态事件 
    this.inputController.on('sendKeyboardStatus', (keyboardStatus: inputMethod.KeyboardStatus) => { 
      this.keyboardStatus = keyboardStatus 
      console.info('ImsaKit this.inputText keyboardStatus= ' + this.keyboardStatus) 
    }) 
  } 
  build() { 
    NavDestination() { 
      Column() { 
        this.componentBuilder() 
      } 
      .width('100%') 
      .height('100%') 
      .backgroundColor(Color.White) 
      .padding({ 
        left: 10, 
        right: 10, 
        bottom: 60 
      }) 
    } 
    .hideTitleBar(false) 
    .title('验证码') 
    .size({ width: '100%', height: '100%' }) 
    .backgroundColor('#FFFFFF') 
  } 
}