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

2025-06-25
北京
本文字数：2303 字
阅读完需：约 8 分钟

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

常用事件如下：

因此，我们可以在 onWillInsert 中做一些数字、英文、单个字符的拦截事件，就不会输入到输入框中。

onSubmit 中我们可以做一些输入内容的校验，例如输入手机号，验证长度够不够，必填内容是否填写完整，可以结合 onEditChange，失去焦点时做一次校验。

以下举一个简单例子，输入 Type 为 Normal，通过 inputFilter 设置正则表达式过滤汉字，如果输入单个字符，可以在 onWillInsert 中进行过滤，以空格为例。onSubmit 回调中可以做一些校验。

代码：

@Entry@ComponentV2struct 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)  }}