前端培训初级阶段场景实战20190530input-搜索如何防抖如何处理中文输入

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会把他们的内容贴地址。

今天我们要讲什么？

有的时候也不知道要写点什么。在掘金摸鱼的时候看到了一个题「第 79 题：input 搜索如何防抖，如何处理中文输入」，感觉挺有意思的。今天我们就来说一说这些相关的知识

1. 节流（throttle）、去抖（debounce）
2. input 标签支持的事件（和值相关的）
3. 正题 - 搜索框 - 去抖 - 处理中文 input 时候的异常

节流（throttle）、去抖（debounce）

节流（throttle）、去抖（debounce），之前写过，有现成的，我就不写了。

input 标签支持的事件

键盘事件

1. keydown 事件
   键盘按下事件
2. keypress 事件
   按下 产生字符值的键时会触发 。如 字母、数字、标点符号。不产生字符值的键的例子是修饰键如 Alt、Shift、Ctrl、backspace 等
3. keyup 事件
   键盘弹起事件

值改变事件

1. change 事件
   值改变事件，在失去焦点的时候判断是否改变，如果改变了会触发。
   可以先输入 123，然后改成 123456 这个时候把 456 删除，就会发现并不会触发 change。测试地址 -change 事件
2. input 事件
   值改变事件，在每次改变的时候触发。
   同上测试案例，会发现触发了 9 次 input 事件。测试地址 -input 事件

输入法事件

1. compositionstart
   输入法的第一个字母时触发。进去输入法状态
2. compositionupdate
   输入法的每次更新时触发。输入法状态输入内容。
3. compositionend
   输入法选择之后触发。退出输入法状态

搜索框 - 去抖 - 处理中文 input 时候的异常

其实看到上面的那些逻辑我们就可以知道，compositionstart 是我们需要监测的事件

事件触发顺序

进入输入法状态：compositionstart=>compositionupdate=>input
输入中：compositionupdate=>input
退出输入法状态：compositionupdate=>input=>compositionend

实现方案

1. 触发了 compositionupdate 就把下次 input 抛弃。compositionend 触发一下 input 的事件;
   测试地址 - 方案 1，效果感觉很不错，去抖的话，给 demo5Console = debounce(demo5Console, 3000)。
   
2. compositionstart 的时候改掉 value，当然这个方案没成功，因为会导致输入框都没了。

总结一下

在 PC 端 有输入的时候我们需要通过 compositionupdate 来纠正输入框的内容。

为什么不说移动端呢？因为我还没测试。。。

后记

参考资料

1. 事件参考 – MDN