中文输入法与上下左右键盘事件冲突问题解决

最新推荐文章于 2024-07-18 18:48:34 发布

流浪码农~

最新推荐文章于 2024-07-18 18:48:34 发布

阅读量526

点赞数 8

文章标签：计算机外设 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_42190844/article/details/135747672

版权

文章讲述了在处理键盘事件时遇到的问题，即输入法选字功能被键盘事件覆盖。作者发现通过监听`KeyboardEvent`的`isComposing`属性，可以在输入法使用期间阻止非预期的键盘操作，提供了一个`handleKeyUpEvent`函数作为解决方案。

摘要由CSDN通过智能技术生成

因为我们在做一些键盘处理时，可能会用到上下左右按键进行其他处理。比如表单输入框的跳转，这时候就会出现一个bug。如果我是正常使用中文输入法在打字，正常情况按上下左右键是可以进行选字操作的。因为我这里键盘事件的缘故，按键会导致跳到下一个输入框了，无法正常选字。

在这里插入图片描述

一开始翻阅文档发现是有对应的事件回调的，compositionstart，compositionupdate，compositionend三个事件。通过绑定事件去判断什么时候输入法结束也是可以的。就是这样处理比较麻烦，后面发现event是有直接给isComposing参数来判断的。

在这里插入图片描述

event事件有抛出来一个参数叫isComposing，代表是否正在使用输入法录入。
那么我们只需要在键盘逻辑里进行判断，isComposing为true时不进行操作即可。
详见 https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/isComposing

在这里插入图片描述

function handleKeyUpEvent(event){
	const { keyCode, ctrlKey, isComposing } = event;
	if (isComposing && [37, 38, 39, 40].includes(keyCode)) return;
}

关注