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

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

常用事件如下： |事件名称|回调时机| |----|----| |onChange|输入内容发生变化时，触发该回调| |onEditChange|输入状态变化时，触发该回调| |onWillInsert|在将要输入时，触发该回调| |onDidInsert|在输入完成时，触发该回调| |onWillDelete|在将要删除时，触发该回调| |onDidDelete|在删除完成时，触发该回调| |onSubmit|按下输入法回车键，触发该回调| 当输入一个英文字符，从输入框没有焦点---获取焦点---输入a---删除a---点击完成，这一操作，事件的响应顺序为： 当输入一个中文字符，从输入框没有焦点---获取焦点---输入哈---删除哈---点击完成，这一操作，事件的响应顺序为： 对比可发现： 英文字符输入，会回调onWillInsert、onDidInsert，汉字输入不会回调这两个函数，而是会回调onChange，再未点击汉字时，属于预输入状态，ha会显示到输入框，但不是最终输入结果。

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

代码：

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