按Tab键handsontable细胞外(Tabbing outside of handsontab

我们必须在handsontable底部的按钮。 当最后一个单元格，用户标签，我们可以选择按钮，而不是包装回到第一个单元格的？

这里是的jsfiddle

 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:

下面是对多个工作表的修复。 放置在容器内的按钮，并添加一个类名称，这使得定位的角度外的按钮。 工程在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