前端培训-初级阶段-场景实战(2019-05-30)-input 搜索如何防抖,如何处理中文输入

前端最基础的就是 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 事件
    值改变事件,在每次改变的时候触发。
    同上测试案例,会发现触发了 9input 事件。测试地址-input事件

输入法事件

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

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

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

事件触发顺序

进入输入法状态:compositionstart=>compositionupdate=>input
输入中:compositionupdate=>input
退出输入法状态:compositionupdate=>input=>compositionend
前端培训-初级阶段-场景实战(2019-05-30)-input 搜索如何防抖,如何处理中文输入

实现方案

  1. 触发了 compositionupdate 就把下次 input 抛弃。compositionend 触发一下 input 的事件;
    测试地址-方案1,效果感觉很不错,去抖的话,给 demo5Console = debounce(demo5Console, 3000)
    前端培训-初级阶段-场景实战(2019-05-30)-input 搜索如何防抖,如何处理中文输入
  2. compositionstart 的时候改掉 value,当然这个方案没成功,因为会导致输入框都没了。

总结一下

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

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

后记

参考资料

  1. 事件参考 - MDN

相关推荐