HarmonyOS怎么在不使用TextInput的情况下调起键盘?

HarmonyOS怎么在不使用TextInput的情况下调起键盘?


HarmonyOS
2024-10-10 10:36:17
833浏览
收藏 1
回答 1
回答 1
按赞同
/
按时间
FengTianYa

可以参考以下demo:

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;  
  }  
  @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)  
        this.attachAndListener();  
      }  
      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)  
    this.isAttached = true  
    this.attachListener()  
  }  
  /**  
   * 订阅输入法回调  
   */  
  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.
分享
微博
QQ
微信
回复
2024-10-10 16:08:36


相关问题
什么情况下使用
1457浏览 • 1回复 待解决
什么情况下使用多Module
3221浏览 • 1回复 待解决
如何在多设备情况下使用hdc
1933浏览 • 2回复 待解决