handsontable是一个功能强大的在线表格插件,可以实现类似于excel的功能。项目中要提供EXCEL一样的编辑功能,于是使用handsontable进行文本内容的编辑。在使用handsontable过程发现一个比较大的问题,在中文输入法的情况下
, 第一个按键会被触发表格的编辑器 , 无法被输入法获得。如下图
入输入:woshiqa 期望输入是我是QA
,实际结果输入是:w哦是QA 。老外的产品功能很强大,但在中文支持方面有点水土不服。
有问题就要解决,提升用户的体验是我们目的。根据问题分析,导致这个问题是我们中文输入时输入首字母时,表格调用onKeyDown方法时被表格当做**表格单元编辑器的输入键,这时输入是 该键的key_code(如 a为 65) 而不是调用输入方法key_code(229),也就是说,如果默认该表格单元已经是**状态时,再使用中文输入法时就不存在此问题了。具体如双击表格,按下ENTER
或F2等操作。
阶段一:
按照这个思路,我们让输入文本前表格处于**状态即可,查看官网API,Github和Stack Overflow ,找到一个可行方案,可以在选择表格后,调用API hook接口**该单元,让单元格处于**编辑状态,然后输入法的字符就不会丢,效果就是“即点即输”。
整好思路,直接撸起码儿,在选择单元后的事件中添加让单元格处于**编辑状态的方法如下图:
核心方法:this.getActiveEditor().beginEditing();
修改完成进行测试,试试,选择表格输入 woshiqa 符合期望可以我是QA,切换Tab测试再输入测试,很好都可以正常输入。小开心一下,毕竟解决了一个历史问题。
作为一个专业的QA,习惯性测试除了需求内功能,又测试测试了相关功能,如强大的复制黏贴功能。哦 NO 复制 黏贴不能用了,在试试下拉填充功能也不能用。这是从一个坑出来,又进入了另外一个坑。 o(╥﹏╥)o
阶段二:
倒杯水,调整下思路 。有坑我们要干嘛?那就填坑。填谁坑?填开发 QA的坑 ,都填。
回想下分析下整个过程,复制黏贴,下拉填充的原生功能是使用到表格select功能,因为我们默认**的表格单元的编辑器,导致这个功能失效 。(做QA我们是专业的O(∩_∩)O哈哈~)
从以下两个方面梳理方向:
1.要保证原先复制黏贴的功能正常 ,即在用鼠标选择时,表格不处于**编辑器状态
2.解决输入法首字母丢失的问题,即在键盘输入文字时,表格处于**编辑器状态
-----败了,再战 撸起代码来
按照以上两个方向,通过keyup mousedown两个事件去控制表格**状态即可。具体的方法添加和需求使用handsontable的添加
Hook插件方法。
A:添加监听方法
B:对应的监听方法中,**和取消**编辑器
C:这里对输入键过了过滤,如方向键,上页,下页的键盘不**表格编辑器,具体可以结合业务需求进行过滤
其中为handsontable添加钩子方法
.addHook(key,callback):key为钩子方法名
.removeHook(key,callback):移除钩子方法
改完了,要干嘛?你说对了,就是要测试 ~~ 开搞 -测试
1.测试双击第一个表格后输入中文正常,按下tab输入第二个表格正常
2.切换选择表格复制正常,下拉填充正常 OK~~~
好了,我们再尝试一下,是不是发现问题已经解决了,Good!可以愉快的玩耍了