HarmonyOS 鸿蒙Next: TextInput如果监听键盘的删除操作

HarmonyOS 鸿蒙Next: TextInput如果监听键盘的删除操作 TextInput监听onKeyEvent时，收不到回调，要如何实现监听键盘的删除操作呢？

2 回复

关于使用输入框焦点的前移可以参考demo：

//验证码输入框
interface codeOne {
  str: string,
  isBorder: boolean
}

@Entry
@Component
export struct TextInputCodeView {
  // 验证码
  @State code: string = ''
  // 验证码位数
  @Prop
  someArrayLength: number = 4
  someArray: number[] = []

  aboutToAppear(): void {
    this.someArray = Array.from({length: this.someArrayLength})
  }

  build() {
    Stack() {
      Row() {
        ForEach(this.someArray, (item: number,index:number) => {
          //加间隙
          if (index != 0) {
            Blank()
          }
          //index + 1 ：表示输入框的位置。
          //填写验证码
          if (this.code.length >= index + 1 ) {
            this.OneText({ str:this.code.substring(index, index + 1), isBorder: index + 1 === this.someArray.length})
          } else {
            //没有验证码
            this.OneText({
              str:'',
              isBorder: this.code.length + 1 === index + 1
            })
          }
        }, (item: number ,index: number) => JSON.stringify(index + 1)) //键值标识
      }
      .width('100%')

      TextInput({ placeholder: "" })
        .width('100%')
        .height('100%')
        .maxLength(this.someArray.length)
        .caretColor(Color.Transparent)
        .fontColor(Color.Transparent)
        .borderColor(Color.Transparent)
        .backgroundColor(Color.Transparent)
        .onChange((value: string) => {
          this.code = value
        })
        .onSubmit(async () => {
          //回车事件
        })
    }
    .width('100%')
    .height(60)
  }

  //参数：验证码内容，是否显示边框
  @Builder OneText(item:codeOne) {
    //判断，是否选中当前的输入框，是否有内容 。是当前选中的，没有内容，显示 |
    Text(item.isBorder && !item.str ? '|' : item.str as string)
      .width(50)
      .height(50)
      .textAlign(TextAlign.Center)
      .fontSize(20)
      .fontColor(item.isBorder && !item.str ? '#ffdd4f46' : Color.Black)
      .backgroundColor('#f3f4f6')
      .borderRadius(8)
  }
}

更多关于HarmonyOS 鸿蒙Next: TextInput如果监听键盘的删除操作的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过TextInput组件的onChange事件来监听键盘的删除操作。onChange事件会在输入框内容发生变化时触发，无论是输入新字符还是删除字符。

具体实现如下：

import { TextInput, onChange } from '@ohos.text';

let input: TextInput = new TextInput();
input.onChange((text: string) => {
  // 这里可以处理输入内容的变化
  // 如果需要判断是否是删除操作，可以结合之前保存的文本内容进行对比
});

// 示例：处理删除操作
let previousText: string = '';

input.onChange((text: string) => {
  if (text.length < previousText.length) {
    // 表示发生了删除操作
  }
  previousText = text;
});

onChange回调中的text参数表示当前输入框的内容。如果text.length小于之前保存的文本长度，则说明发生了删除操作。通过在回调中保存上一次的文本内容，可以判断是否是删除操作。

这种方法适用于鸿蒙Next中TextInput组件的键盘删除操作监听。

回到顶部