键盘快捷键发送与输入法按键冲突

键盘事件深入探究

1、问题演示:

要求点击空格键发送输入框内容,使用的方法是

@keyup.space.native="submit"

但是对于输入法,空格键就是将拼写的文字输入到输入框内,那么导致,确定输入文字时,就触发了发送函数
在这里插入图片描述

2、官方解释:

  1. keydown:当用户按键盘上的键时,该事件将发送到元素。如果按住该键,则每次操作系统重复该键时都会发送该事件。它可以附加到任何元素,但事件仅发送到具有焦点的元素。可聚焦元素可能因浏览器而异,但表单元素始终可以获得焦点加粗样式,因此是此事件类型的合理候选者‎
  2. keyup:‎当用户释放键盘上的键时,该事件将发送到元素。它可以附加到任何元素,但事件仅发送到具有焦点的元素。可聚焦元素可能因浏览器而异,但表单元素始终可以获得焦点,因此是此事件类型的合理候选者。‎
  3. keypress:当浏览器注册键盘输入时,该事件将发送到元素。这与keydown事件类似,不同的是修饰符和非打印键(如Shift, Esc, and delete ) 触发了keydown事件,而不是keypress事件。这两个事件之间的其他差异可能会根据平台和浏览器而出现。‎事件处理程序可以附加到任何元素,但事件仅发送到具有焦点的元素。可聚焦元素可能因浏览器而异,但窗体控件始终可以获得焦点,因此是此事件类型的合理候选项。‎Note: ‎由于该事件未包含在任何官方规范中,因此在使用它时遇到的实际行为可能因浏览器,浏览器版本和平台而异。‎

3、查找原因:

实际验证发现,当按下space按键时触发了输入法的键盘事件,输入法拼写的内容输入到输入框内,然后输入法关闭,然后按键松开触发了浏览器的keyup事件,所以导致确定内容时触发了发送事件

4、解决办法:

@keypress.space.native="submit"

当处于输入法拼写内容时,点击space按键,正常输入内容,且不触发keypress事件,再按space则触发浏览器键盘事件,执行submit,这样就不会冲突了

你可能感兴趣的:(键盘事件,javascript,前端,html)