Angalur 框架文本域textarea 绑定input事件内容汉字不能触发事件问题分析与解决

前端白袍

已于 2023-05-29 19:09:31 修改

阅读量1.7k

点赞数 3

分类专栏：前端学习笔记——Angular框架篇文章标签： angular.js javascript ecmascript

于 2023-05-29 19:07:59 首次发布

本文链接：https://blog.csdn.net/qq_44776454/article/details/130926762

版权

前端学习笔记——Angular框架篇专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、问题场景：

提示：这里简述出现问题相关背景：

前端框架：Angular；
出现相关问题的标签：表单input，文本域textarea；

二、问题描述

提示：这里描述遇到的具体问题详情：

场景：开放过程中你以下这样的类似需求时，就需要十分注意（angular环境下的问题，原生不存在）：

在表单输入框或文本域中输入内容时，在输入状态下，判断某一个特定标识变量的值，用于控制当前输入框的是否可输入（或者禁用）的状态。
在表单输入框或文本域中输入内容时，在输入状态下，需要拿取输入框内每次输入的内容，用于后续等等一系列操作。
上述两点场景可概述为：输入框输入状态下拿到每次输入的数据进行某些数据状态的判断。

1.需求实现

上面需求实现要点是在输入状态下，那么很简单 input 事件即可满足，在其事件函数中即可完成拿到输入时的数据，并且用拿到的数据进行某些逻辑操作。（这里口述代码：在input事件回调函数中，因为背景是在Angular框架中，所以，拿去输入框实时输入的值就可以通过双向绑定的变量值去拿取。）

1-1知识片段插入

input事件与change事件区别

相同点：JavaScript原生事件。
共同点：多用于表单标签绑定的事件。
不同点：触发时机不同：
input事件：触发时机在每次输入框输入内容时（按下键盘的每一次）都会触发input事件。
change事件：触发时机满足两点：1.在输入框失去交的时。2.在失去焦点时绑定当前change事件的表单元素，其本次输入或改变的内容与上一次的内容不一样。满足这两点才可以触发事件。

2.具体问题复现

下面部分主体代码

// 模板 HTML
<h1>
  Angular 框架中测试 input 事件 触发效果
</h1>
<textarea [(ngModel)]="inputValue" (input)="inputHandle()" ></textarea>

// 逻辑代码TS
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  inputValue = ''
  //input 事件函数
  inputHandle() {
    console.log(this.inputValue) // 打印输入内容
  }
}

运行以上代码===》运行结果如下：

情形1：当输入法为英文输入状态下时，输入数字字母时，当前input事件触发机制没有任何影响。
在这里插入图片描述

情形2：当输入法为中文输入状态下时，输入汉中时，每次敲击键盘都会触发input事件，但是其值是空；并且当我们成功输入汉字后，汉字不会被识别到。
在这里插入图片描述

敲击了六下打印了六个空。

在这里插入图片描述

当我们按空格确认汉字后，空格也触发一个input事件，本次事件并没有把输入的最终汉字给读取到。

情况3：接情况2，当我们在情况2基础上在输入框中再次输入英文状态下数字字母或者按空格时，情况2 输入的汉字才会被拿取打印出来。
在这里插入图片描述

当再次输入空格，发现打印出了上次输入的汉字。

如果angular中文本域 input事件是这种效果那么input事件将不能完成原本能完成的对应功能。
——问题所在之处。

三、原因分析：

提示：这里描述问题原因分析：

出现这个问题的具体原因没有找到但是通过测试不同环境与度娘找到了替代input事件的方法。

下面简要说一下具体排查问题过程：

Angluer框架下使用input标签尝试相同问题场景复现，发现具有相同问题。
由于框架存在的原因，所以想在原生的情况下看看给元素绑定input事件是否有此类问题。（代码忽略：本人已经尝试体验了，结果是原生不存在上述问题，那么就可以推断是框架内部封装问题。感兴趣的读者可以自行尝试。）
通过度娘发生微信小程序开放有类似问题（虽然没有什么作用但是有点点思路了）
微信相关问题官方链接: 点击查看。
继续度娘发现一篇文章，用于解决原生状态下，输入汉字时前面输入的拼音也会触发input事件，造成性能消耗问题。

解决这个问题，作者没有使用防抖节流，使用的是一组很少见的事件。
compositionstart事件、compositionend事件，其中compositionend可以实现我们想要的效果，下面会有提供代码。
具体可查看原文: 点击跳转，查看两事件的触发时机和作用，再次不再赘述。

测试代码：

// 模板 HTML - 
<textarea [(ngModel)]="inputValue" (compositionend)="inputHandle()"></textarea>
// 逻辑 TS
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test';
  inputValue = ''
  inputValue2 = ''
  inputHandle() {
    console.log(this.inputValue)
  }
}

运行结果如下：
——1
在这里插入图片描述
——2

——3

——4

根据四张图片不难发现，compositionend只会在输入汉字拼音输入完成后才会触发，并能拿到绑定的值。

5.查询度娘Angular 事件过程中无意间发现之前很常用的一个指令事件 ngModelChange，使用过Angluer框架的朋友可能再熟悉不过了。解决问题具体如下：

// 模板 HTML 
<textarea [(ngModel)]="inputValue" (ngModelChange)="ChangeHandle($event)"></textarea>
// TS
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ChangeHandle(event: any) {
    console.log(event)
  }
}