利用tabindex修复luckysheet点击工具栏按钮后Ctrl+z无效的问题

问题描述

编辑单元格后，点击表格上方的工具栏按钮，再按CTRL+Z会发现撤销无效。

开工

初步分析是点击工具栏之后监听的dom焦点消失了，就无法监听Ctrl+z了。

先全局搜“CTRL + Z”，很容易就找到事件处理对应的代码位置：keyboard.js的keyboardInitial方法

         分析代码可以知道是监听了luckysheet-input-box和luckysheet的keydown事件，但是点击工具栏后luckysheet-input-box会失去焦点，而luckysheet本身就无法监听keydown，所以想着把luckysheet换成body（body，input,textarea能监听keydown）。

改代码，测试，没问题，打包，上线。

后续问题

        没过多久，一位同事就说他用我改过的luckysheet源码出现了bug，他说luckysheet会抢其他input框的焦点，分析后觉得是前面把luckysheet换成body导致的问题。由于在我的项目中是直接使用luckysheet，而同事的项目会添加其他的input，按下键盘后捕获阶段触发body的keydown导致他的input不能用了。

        所以需要想想其他的办法，之后百度看能不能给luckysheet也监听keydown事件，发现了下面这篇文章。这篇文章介绍只要给一个标签加上tabindex属性，值为-1就能监听keydown了。

即:

<div tabindex="-1" >监听这个标签</div>

关于javascript:JavaScript-keydown事件总结 - 乐趣区 (lequ7.com)https://lequ7.com/guan-yu-javascriptjavascriptkeydown-shi-jian-zong-jie.html

        文章还介绍，之所以body能监听keydown也是加上了这个属性

        修改代码，在keydown事件回调前，为luckysheet加上前面介绍的属性

    // nby 解决失去焦点后ctrl+z无效的问题  
    $('#luckysheet').attr('tabindex','-1')

        最后把打包好的源码发给同事，测试，没得问题，呼呼。