在可手动操作的单元格外进行制表

Question

我们在掌上电脑的底部有一个按钮。当用户在最后一个单元格中按 Tab 键时，我们可以 select 按钮而不是回到第一个单元格吗？

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>

Answer 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();
    }
  }
});

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

Answer 2

这是一个适用于多个表的修复程序。在容器内放置一个按钮并添加一个 class 名称，使按钮位于视图之外。适用于 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%;
}

在可手动操作的单元格外进行制表

Tabbing outside of handsontable cells

handsontable