摘要：在掘金摸鱼的时候看到了一个题第题搜索如何防抖，如何处理中文输入，感觉挺有意思的。测试地址事件输入法事件输入法的第一个字母时触发。输入法状态输入内容。输入法选择之后触发。
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会把他们的内容贴地址。
今天我们要讲什么？有的时候也不知道要写点什么。在掘金摸鱼的时候看到了一个题「第 79 题：input 搜索如何防抖，如何处理中文输入」，感觉挺有意思的。今天我们就来说一说这些相关的知识
节流（throttle ）、去抖（debounce ）
input 标签支持的事件（和值相关的）
正题-搜索框-去抖-处理中文input时候的异常
节流（throttle ）、去抖（debounce ）节流（throttle ）、去抖（debounce ），之前写过，有现成的，我就不写了。
input 标签支持的事件 键盘事件keydown 事件
键盘按下事件
keypress 事件
按下产生字符值的键时会触发。如字母、数字、标点符号。不产生字符值的键的例子是修饰键如 Alt、Shift、Ctrl、backspace 等
keyup 事件
键盘弹起事件
change 事件
值改变事件，在失去焦点的时候判断是否改变，如果改变了会触发。
可以先输入 123，然后改成 123456 这个时候把 456 删除，就会发现并不会触发 change。测试地址-change事件
input 事件
值改变事件，在每次改变的时候触发。
同上测试案例，会发现触发了 9 次 input 事件。测试地址-input事件
compositionstart
输入法的第一个字母时触发。进去输入法状态
compositionupdate
输入法的每次更新时触发。输入法状态输入内容。
compositionend
输入法选择之后触发。退出输入法状态
其实看到上面的那些逻辑我们就可以知道，compositionstart 是我们需要监测的事件
事件触发顺序进入输入法状态：compositionstart=>compositionupdate=>input
输入中：compositionupdate=>input
退出输入法状态：compositionupdate=>input=>compositionend
触发了 compositionupdate 就把下次 input 抛弃。compositionend 触发一下 input 的事件;
测试地址-方案1，效果感觉很不错，去抖的话，给 demo5Console = debounce(demo5Console, 3000)。
compositionstart 的时候改掉 value，当然这个方案没成功，因为会导致输入框都没了。
在PC端有输入的时候我们需要通过 compositionupdate 来纠正输入框的内容。
为什么不说移动端呢？因为我还没测试。。。
后记 参考资料事件参考 - MDN
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109870.html
摘要：在掘金摸鱼的时候看到了一个题第题搜索如何防抖，如何处理中文输入，感觉挺有意思的。测试地址事件输入法事件输入法的第一个字母时触发。输入法状态输入内容。输入法选择之后触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我...
摘要：前端最基础的就是。我这边预期准备进入中级阶段，中间还是会穿插一些实战。语法精确匹配，匹配成功，则停止搜索正则不能有嵌套的。指令会根据在配置文件中出现的顺序依次执行，可以使用来终止接下来的处理。如果以或者或者，则停止处理，立刻重定向。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...
摘要：前端最基础的就是。我这边预期准备进入中级阶段，中间还是会穿插一些实战。语法精确匹配，匹配成功，则停止搜索正则不能有嵌套的。指令会根据在配置文件中出现的顺序依次执行，可以使用来终止接下来的处理。如果以或者或者，则停止处理，立刻重定向。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...
摘要：面试的公司分别是阿里网易滴滴今日头条有赞挖财沪江饿了么携程喜马拉雅兑吧微医寺库宝宝树海康威视蘑菇街酷家乐百分点和海风教育。 （关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导） 本人于7-8月开始准备面试，过五关斩六将，最终抱得网易归，深深感受到高级前端面试的套路。以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。 面试的公司分...
阅读 1397·2023-04-25 17:18
阅读 1860·2021-10-27 14:18
阅读 2103·2021-09-09 09:33
阅读 1821·2019-08-30 15:55
阅读 2003·2019-08-30 15:53
阅读 3423·2019-08-29 16:17
阅读 3411·2019-08-26 13:57
阅读 1710·2019-08-26 13:46
