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') 
  } 
}
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.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.