鸿蒙Next文本输入TextInput事件回调总结 原创

auhgnixgnahz
发布于 2025-6-12 21:27
浏览
0收藏

本文主要整理一下TextInput输入框,输入内容到显示相关的事件回调及用途。

常用事件如下:

事件名称 回调时机
onChange 输入内容发生变化时,触发该回调
onEditChange 输入状态变化时,触发该回调
onWillInsert 在将要输入时,触发该回调
onDidInsert 在输入完成时,触发该回调
onWillDelete 在将要删除时,触发该回调
onDidDelete 在删除完成时,触发该回调
onSubmit 按下输入法回车键,触发该回调

当输入一个英文字符,从输入框没有焦点—获取焦点—输入a—删除a—点击完成,这一操作,事件的响应顺序为:
鸿蒙Next文本输入TextInput事件回调总结-鸿蒙开发者社区
当输入一个中文字符,从输入框没有焦点—获取焦点—输入哈—删除哈—点击完成,这一操作,事件的响应顺序为:
鸿蒙Next文本输入TextInput事件回调总结-鸿蒙开发者社区
对比可发现:
英文字符输入,会回调onWillInsert、onDidInsert,汉字输入不会回调这两个函数,而是会回调onChange,再未点击汉字时,属于预输入状态,ha会显示到输入框,但不是最终输入结果。
鸿蒙Next文本输入TextInput事件回调总结-鸿蒙开发者社区

因此,我们可以在onWillInsert中做一些数字、英文、单个字符的拦截事件,就不会输入到输入框中。
onSubmit中我们可以做一些输入内容的校验,例如输入手机号,验证长度够不够,必填内容是否填写完整,可以结合onEditChange,失去焦点时做一次校验。
以下举一个简单例子,输入Type为Normal,通过inputFilter设置正则表达式过滤汉字,如果输入单个字符,可以在onWillInsert中进行过滤,以空格为例。onSubmit回调中可以做一些校验。
鸿蒙Next文本输入TextInput事件回调总结-鸿蒙开发者社区

代码:

@Entry
@ComponentV2
struct TextInputTest{
  @Local textError: string = '';
  @Local text: string = '';
  @Local lineHeight:number=30//文本的行高
  @Local letterSpacing:number=1//文本字符间距
  build() {
    Column(){
      TextInput({ placeholder: '请输入手机号', text: this.text })
        .type(InputType.Normal)
        .caretStyle({width:3,color:Color.Blue})
        .enterKeyType(EnterKeyType.Done)
        .showUnderline(true)
        .width('90%')
        .height('auto')
        .showError(this.textError)
        .maxLength(11)
        .lineHeight(this.lineHeight+'vp') //文本的行高
        .letterSpacing(this.letterSpacing+'vp') //文本字符间距
        .inputFilter('[^\u4e00-\u9fa5]', (e) => { //仅支持单个字符匹配,不支持字符串匹配
          console.log(e);
        })
        //当输入字符数大于最大字符数乘百分比值时,显示字符计数器
        .showCounter(true, { thresholdPercentage: 1, highlightBorder: true })
        //输入内容发生变化时,触发该回调
        .onChange((value: string, previewText?: PreviewText, options?: TextChangeOptions) => {
          //value  文本框内正式上屏的文本内容
          //previewText 预上屏文本信息,包含预上屏起始位置和文本内容 (offset 预上屏内容的起始位置  value 预上屏的内容)
          //options  文本内容变化信息,包含变化前后的选区范围、变化前的文本内容和预上屏文本信息
          let pre=''
          if (previewText) {
            pre = ' PreviewText offset:'+previewText!.offset+' value:'+previewText!.value
          }
          let opt=''
          if(options){
            opt = ' oldContent:'+options!.oldContent
          }
          this.text = value
          if(this.text.length==11){
            this.textError=''
          }
        console.log('onChange value:'+value+pre+opt)
        })
        //输入状态变化时,触发该回调。有光标时为编辑态,无光标时为非编辑态。isEditing为true表示正在输入。
        .onEditChange( (isEditing: boolean)=>{
          console.log('onEditChange:'+isEditing?'获取焦点':'失去焦点')
          if (!isEditing&&this.text.length<11) {
            this.textError='长度不够'
          }
          return true
        })
          //在将要输入时,触发该回调
        .onWillInsert((info: InsertValue) => {
          console.log('onWillInsert: info:'+info.insertValue)
          if (info.insertValue==' ') {

            return false
          }
          return true
        })
          //在输入完成时,触发该回调
        .onDidInsert((info: InsertValue) => {
          console.log('onDidInsert: info:'+info.insertValue)
          return true
        })
          //在将要删除时,触发该回调
        .onWillDelete((info: DeleteValue) => {
          console.log('onWillDelete: info:'+info.deleteValue)
          return true;
        })
          //在删除完成时,触发该回调
        .onDidDelete((info: DeleteValue) => {
          console.log('onDidDelete: info:'+info.deleteValue)
          return true;
        })
        //按下输入法回车键触发该回调
        .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => {
          //enterKey 输入法回车键类型。
          //event  提交事件
          if (this.text.length<11) {
            this.textError='长度不够'
            // 调用keepEditableState方法,输入框保持编辑态
            event.keepEditableState();
          }else {
            this.textError = '';
          }
          console.log('onSubmit:')
        })

      Row({ space: 10 }) {
        Column() {
          Text("文本的行高")
          Counter() {
            Text(this.lineHeight.toString())
          }
          .onInc(() => {
            this.lineHeight += 1;
          })
          .onDec(() => {
            if (this.lineHeight > 1) {
              this.lineHeight -= 1;
            }
          })
        }

        Column() {
          Text("文本字符间距")
          Counter() {
            Text(this.letterSpacing.toString())
          }
          .onInc(() => {
            this.letterSpacing += 1;
          })
          .onDec(() => {
            if (this.letterSpacing > 1) {
              this.letterSpacing -= 1;
            }
          })
        }

      }
    }.width('100%')
    .padding(20)
  }
}

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
已于2025-7-10 09:25:54修改
收藏
回复
举报
回复
    相关推荐