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

一、问题场景：

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

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

---

二、问题描述

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

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

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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

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

---

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

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

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

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

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

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

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

三、原因分析：

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

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

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

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

运行结果如下：
——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)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上面代码执行后，ngModelChange 的回调函数参数就可以直接拿取 当前输入的所有新值。完全满足功能需求。

因为ngModelChange 事件 再熟悉不过了 就不再描述了，就此问题解决了，至于原生input出现的问题，我想是 框架本身的原因，再者，ngModelChange 个人认为 在Angular框架中 基本上就是替代了 原生的input和change的存在。

四、回顾总结：

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

这片文章属实是记录一次踩坑，由于惯性思维的作用，在满足业务需求的情况下，第一时间没有想到框架提供的API，采用原生API处理问题。才出现了这一系列操作，当然本次失误也并不是无用功，希望对看到的朋友或遇到一样问题的朋友都有一些帮助。