媒介

最近因一个需求在element-ui的Select组件文档内找不到对应的示例，也就是filter-method要领的详细运用样例，尝试频频以后也运用了一种方法完成，然则觉得并非最优，因而尝试看组件源码来追求结果。

在探访的过程当中发明本身对键盘输入事宜的明白还并不到位，以至于有一些代码看得云里雾里，赶忙查阅材料写写demo总结一下(下文所说只在chrome与ff里做了探讨)。

浏览器的键盘事宜(keyboard event)

• 键盘事宜主要有以下四类

  • keydown
  • keypress
  • keyup
  • input (尽在input与textarea里触发)

• 事宜触发递次
  一开始我以为触发递次看起来很easy 不就应该是keydown -> keypress -> input -> keyup这个递次，但实际情况里另有很多特殊情况。(假如不是在input与textarea里的则去掉input即可)

  首先说一下，键盘上的键位能够分为2种范例

  • 输入型键位 0-9 a-z等等统统你要输入字符的按键

  • 功用性键位 Ctrl Command Shift等

    这两种范例在事宜触发递次上是有所差异的

    • 输入型键位

      • 轻按一下疾速弹起

        keydown -> keypress -> input -> keyup

      • 按住一段时候再弹起

        在mac上测试的时刻，搜狗输入法以及自带的拼音输入法递次为 keydown -> (keypress -> input -> keydown -> keypress -> input ...轮回) -> keyup，输入框里输入字符一向增添

        但是切换到体系自带的英文输入法 keydown -> keypress -> input -> (keydown -> keydown -> ...轮回) -> keyup，输入框里输入字符只要1个

        注：仅在表单里差别输入法能够表现不一致，假如window层面上的监听则表现一向，都为(keydown -> kewpress...轮回) -> keyup

        详细缘由不详，愿望有大佬能够指出，觉得是输入法底层完成的题目。然则我们能够看出，在input元素里，只要触发keydown事宜是没法胜利在个中输入值的

    • 功用性键位

      这类键位不会触发keypress，其实在测试功用性键位的时刻，我以为还能够详细分为2种键位

      • 功用润饰性键位

        如Ctrl, Command等，须要组合其他键位才有结果，这类键位的长按与短按触发递次都一致，为keydown -> keyup，

      • 单功用性键位

        如Ese 上下左右箭头这类不须要组合的见效的键位。

        • 短按触发递次

          keydown -> keyup

        • 长按触发递次

          keydown -> keydown...轮回 -> keyup

• 事宜阻挠

  • 冒泡

    这4类事宜都邑冒泡，阻挠根据通例挪用Api接口就能够阻挠冒泡了。

  • 默许行动

    键盘事宜的默许行动就是输入，那末已相识过了事宜触发递次，我们肯定能够猜到，假如想阻挠在input输入框里输入字符，我们能够在input事宜之前阻挠默许行动，即在keydown和keypress事宜的时刻挪用e.preventDefault()即可阻挠输入，这个技能也常用于输入考证的时刻阻挠一些凌驾次数的输入。而在keydown里阻挠默许行动的话，连keypress事宜都不会触发

• input事宜

  假如你在input,textarea输入框里输入中文的时刻，在ff与chrome有差别的事宜触发流程

  • chrome

    没有keypress事宜的触发

  • ff

    仅触发1次keydown，屡次input和1次keyup

所以监听input事宜就足够了，参考百度搜刮栏，我们能够完成一个搜刮的提醒性的功用，对中文照样很友爱的。

什么时候猎取获得表单input的值

经由过程上述学问，我们能够猜到只要在输入框的值发生变化的时刻才会触发input事宜，那末在input事宜里必定能够准确的猎取到当前input的值，同理keyup更晚，肯定能够猎取到。keydown,keypress事宜触发的时刻，则没法猎取到input表单转变的最新值。

运用

• 能够监听input对输入内容作及时校验
• 能够监听input对输入内容作友爱的提醒
• 能够监听keydown对组合快捷键作响应，作一个精彩的Web运用
• 能够阻挠一些输入的内容

跋文

觉得把input事宜放到这内里不太适宜，毕竟其他三个时候都是键盘事宜，而input是专属于表单值变化而触发的事宜。然则觉得平常的坑都在这里，所以就加进来了。

参考

• https://developer.mozilla.org/zh-CN/docs/Web/Events/keydown
• https://developer.mozilla.org/zh-CN/docs/Web/Events/keyup
• https://developer.mozilla.org/zh-CN/docs/Web/Events/keypress
• https://developer.mozilla.org/zh-CN/docs/Web/Events/input

假如喜好能够star一下，会不断更新github地点