在handsontable 单元格之外进行选项卡答案

【问题标题】：Tabbing outside of handsontable cells在handsontable 单元格之外进行选项卡
【发布时间】：2015-07-23 18:17:17
【问题描述】：

我们在handsontable 的底部有一个按钮。当用户在最后一个单元格中 tab 时，我们可以选择按钮而不是返回到第一个单元格吗？

var data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2014", 10, 11, 12, 13],
  ["2015", 20, 11, 14, 13],
  ["2016", 30, 15, 12, 13]
];

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  autoWrapRow: true,
  autoWrapColumn: true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.14.1/handsontable.full.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.14.1/handsontable.full.js"></script>
<form>
  <div id='example'></div>
  <br />
  <input type="button" value="Save"></input>
</form>

【问题讨论】：

标签： handsontable

【解决方案1】：

我要做的是捕获事件，在您的情况下为.on('beforekeydown')，并检查 Tab 键。如果按下，则使用hot.getSelected() 检查热实例当前位于哪个单元格，如果它是最后一个单元格，则将焦点切换到您想要的任何按钮。下面是代码的一些细节：

Handsontable.Dom.addEvent(containerTag, 'keydown', function(e) {
  // On Tab, go to external button if last cell
  if (e.keyCode === 9 && hotInstance) {
    e.stopPropagation();
    var selection = hotInstance.getSelected();
    var rowIndex = selection[0];
    var colIndex = selection[1];
    if (rowIndex == lastRow && colIndex == lastCol) {
       hotInstance.deselect();
       buttonJquerySelector.focus();
    }
  }
});

我没有测试过这段代码，但这或多或少是你应该尝试做的。

【讨论】：

谢谢。我想知道是否有另一种方法来拦截 tabMoves 选项，但看起来没有。我们将尝试上述方法。

【解决方案2】：

这是一个适用于多个表的修复程序。在容器内放置一个按钮并添加一个类名，使按钮位于视点之外。适用于 6.2.2

Handsontable.hooks.add('beforeKeyDown', function (event) {
    // On Tab, go to external button if last cell
    if (event.keyCode !== 9) {
        return;
    }

    var sel = this.getSelected();
    var lastRow = this.countRows() - 1;
    var lastCol = this.countCols() - 1;

    if ((!event.shiftKey && sel[0][0] === lastRow && sel[0][1] === lastCol) || (event.shiftKey && sel[0][0] === 0 && sel[0][1] === 0)) {
        event.stopImmediatePropagation();

         var el = $(this.getInstance()).get(0).rootElement;
        // Focus the activator button first -> otherwise, if the user has not tabbed into the table, it wouldn't skip to the next form element
        var hotActivators = el.getElementsByTagName('button');
        if (hotActivators.length > 0) {
            hotActivators[0].focus();
        }

        this.unlisten();
        this.deselectCell();
    }
});

CSS：

.hotActivatorButton {
    position: fixed;
    bottom: 100%;
    right: 100%;
}

【讨论】：