当焦点在另一个输入框时，Handsontable单元格还在对焦（Handsontable cell is focusing, when focus in another input ）

问题描述：
当我右键handsontable中的某一个单元格，在右键菜单里面有一项可以弹出对话框，在弹出对话框的时候使用了jquery的focus方法让我对话框中的输入框获取到了焦点，此时光标也在输入框中闪烁，当我敲击键盘输入内容时，居然直接修改了handsontbale单元格的内容。
github上相似的issue
但是当我用鼠标点击对话框的时候，我就可以正常在我的对话框中输入内容，不得不说，这很神奇，也很坑爹。

那么如何解决呢？

被handsontable虐了千百遍的我，再一次打开了handsontable的源码，近3万行的代码，每次打开都是一脸的懵逼。
首先，我用最笨的方法来定位问题所在的地方，在js文件中全局搜索有keydown事件的地方，因为不管怎样，handsontable肯定是监听了keydown事件的。
然后，打上断点，开始测试and调试，当你给handsontable打上断点后，就不难发现当你触发keydown事件的时候，会进入到哪个代码块中。
调试了几遍后，定位到了位于6633行的function onKeyDown(event)中，那么问题来了，这个事件是在哪里绑定的呢？
接着往下找，在6776行的位置，有一个document的keydown绑定，代码如下：

function init() {instance.addHook('afterDocumentKeyDown', onKeyDown);eventManager.addEventListener(document.documentElement, 'keydown', function(event) {instance.runHooks('afterDocumentKeyDown', event);});function onDblClick(event, coords, elem) {if (elem.nodeName == 'TD') {_this.openEditor();if (activeEditor) {activeEditor.enableFullEditMode();}}}instance.view.wt.update('onCellDblClick', onDblClick);instance.addHook('afterDestroy', function() {destroyed = true;});}

版本不同，可能所在的位置也会有差异，可以直接在js文件中搜索“afterDocumentKeyDown”来定位。

既然找到了，就直接改呗，怎么改呢？这又是个问题，如果直接改了事件监听，你会发现handsontable正常的输入行为也会有问题，那我们在事件触发的时候增加判断逻辑？这样的话，你又会发现handsontable的事件被我们阻止了，但是我们自己对话框的输入事件还是没有，想来想去，还是从源头修改：
既然handsontable监听了document的 keydown事件，那么我们想办法把事件监听迁移到handsontable本身不就行了？

仔细观察上面代码，不难发现，handsontable通过eventManager.addEventListener来绑定事件，我们找到这个方法所在的位置，8730行，修改绑定事件的逻辑：

  addEventListener: function(element, eventName, callback) {**if(element.nodeType == 9 || (element.nodeType == 1 && (eventName == "keydown" || eventName == "keyup"))){element = this.context.rootElement ? this.context.rootElement : this.context.wtTable.wtRootElement.parentElement;}**var $__3 = this;var context = this.context;function callbackProxy(event) {if (event.target == void 0 && event.srcElement != void 0) {if (event.definePoperty) {event.definePoperty('target', {value: event.srcElement});} else {event.target = event.srcElement;}}if (event.preventDefault == void 0) {if (event.definePoperty) {event.definePoperty('preventDefault', {value: function() {this.returnValue = false;}});} else {event.preventDefault = function() {this.returnValue = false;};}}event = extendEvent(context, event);callback.call(this, event);}this.context.eventListeners.push({element: element,event: eventName,callback: callback,callbackProxy: callbackProxy});if (window.addEventListener) {element.addEventListener(eventName, callbackProxy, false);} else {element.attachEvent('on' + eventName, callbackProxy);}Handsontable.countEventManagerListeners++;return (function() {$__3.removeEventListener(element, eventName, callback);});}

好了，我们再尝试一下，是不是发现问题已经解决了，perfect！

当焦点在另一个输入框时，Handsontable单元格还在对焦（Handsontable cell is focusing, when focus in another input ）相关推荐

Java黑皮书课后题第8章：*8.23（游戏：找到翻转的单元格）假定给定一个填满0和1的6*6矩阵，所有的行和列都有偶数个1。让用户翻转一个单元，编写一个程序找到哪个单元格被翻转了
*8.23(游戏:找到翻转的单元格)假定给定一个填满0和1的6*6矩阵,所有的行和列都有偶数个1.让用户翻转一个单元,编写一个程序找到哪个单元格被翻转了题目题目描述与运行示例破题代码题目题 ...
【EasyExcel】EasyExcel列表填充数据时指定单元格合并
EasyExcel列表填充数据时指定单元格合并 package com.susing.security.handler;import com.alibaba.excel.metadata.CellDa ...
ruoyi导出excel时合并单元格
ruoyi版本 3.8.2 首先第一步增加注解 /*** 合并行* 参数1合并第一个参数为合并基准列,其他列用逗号拼接,依据基准列进行当前单元行合并参数:如1,7, 8*/ public Stri ...
使用EasyExcel导出表格时合并单元格
背景现在需要将一个导出列表数据到Excel表格的功能进行改造,将指定列相同数据自动合并单元格. 如上图所示,指定A.B两列自动合并,如图所示(6.7),(8.9),(13.14.15)要自动合并单元 ...
【Word / WPS文字】快速和方便地选择单个一个很小的单元格（而不是选择其中的文字）的技巧
一.问题背景当我们需要对整个单元格进行操作(例如调整表格属性)时,需要选中这个单元格,而非其中的文字. 选单元格中的文字非常简单,选中多个位置相邻地单元格也很简单,都可以直接用鼠标左键拖拽解决. 难 ...
EasyExcel填充时合并单元格
由于填充时第二行开始,easyexcel不会自动合并单元格,所以需要自定义handler根据上一行的合并信息自行合并 public class MyHandler extends AbstractMe ...
POI读取excel时，单元格内容转化字符串
最近项目需要使用POI解析excel,但在获取每个单元格时,遇到了把单元格内容转为字符串过程中出现各种问题,整数类型后面带小数点.时间格式变为整数形式等等. 最后通过判断Cell的类型进行分别处理,话 ...
java导出csv文件为解决导出excel时每个单元格的限制（32767）
此实现方法仅供参考因为本人导出数据量不大所采取的方法如数据量大,会到至内存溢出请知晓在这还提下:导出时内容自己换行只需在内容前尾各加双引号就行. 如图: 1.准备导出工具类 // An hig ...
怎样移动方向键时在单元格之间移动光标
<body οnkeydοwn="mm()"> <table id=table1 border=1 cellspacing=0 width=300> < ...

当焦点在另一个输入框时，Handsontable单元格还在对焦（Handsontable cell is focusing, when focus in another input ）

当焦点在另一个输入框时，Handsontable单元格还在对焦（Handsontable cell is focusing, when focus in another input ）相关推荐

最新文章

热门文章