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

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


HarmonyOS
2024-10-10 10:36:17
浏览
收藏 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')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-10 16:08:36
相关问题
什么情况下使用
597浏览 • 1回复 待解决
如何在多设备情况下使用hdc
723浏览 • 2回复 待解决
什么情况下使用多Module
2341浏览 • 1回复 待解决
HarmonyOS TextInput如何主动弹出键盘
368浏览 • 1回复 待解决
HarmonyOS TextInput调用系统键盘问题
274浏览 • 1回复 待解决
HarmonyOS TextInput键盘相关问题咨询
547浏览 • 1回复 待解决
HarmonyOS TextInput自定义键盘
433浏览 • 1回复 待解决