最近碰到两个键盘事件的问题,以前一直没怎么注意。

中文输入法的回车问题

很多输入框都支持Enter回车键提交,但是在中文输入法下,用回车输入英文的时候会直接触发Enter提交行为。此时可以使用KeyboardEventisComposing属性可以判断当前是否是处于输入过程中,即是否在compositionstartcompositionend之间,如果isComposingtrue,忽略此时的Enter即可。在FirefoxChrome中都无此问题,但是在Safari下,此时的isComposing会为false,无法正常处理此时的Enter

迫于无奈,只好看下Event中是否还有其他属性可以使用,试试keycode和被抛弃的keyCode

console.log(e.key, e.code, e.keyCode, e.isComposing)

Chrome / Edge 结果如下:

Firefox 结果如下:

Safari 结果如下:

Firefox下,key属性会返回Process,而其他浏览器会返回当前按下的按键字母,看起来是没法用了。唯独被抛弃的keyCode倒是一如既往地可靠——在整个输入过程中一直返回229……似乎没得选了,只能用keyCode判断是否为13来处理了。

按住按键重复触发键盘keydown事件

MacOSChrome下,按住Alt/Shift/Command等控制按键,并不会触发连续的keydown事件,只有按住其他可以改变输入框内容的按键(如字母、数字、符号等)才会连续触发keydown事件,但在Windows下无论什么键都会重复触发keydown事件。

不过这个处理也比较简单,按键事件有个属性repeat,第一次为false,后续触发时为true

第一次触发:

后续触发:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.