Tabbing outside of handsontable cells

问题

We have a button at the bottom of handsontable. When the user tabs in the last cell, can we select the button instead of wrapping back to the first cell?

Here is the 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>

回答1:

What I would do is capture the event, in your case .on('beforekeydown'), and check for the tab key. If pressed, check what cell the hot instance is currently on using hot.getSelected() and if it is the last cell, switch the focus to whatever button you want. Here is some detail of the code:

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

I haven't tested this code but this is more or less what you should be trying to do.

回答2:

Here is a fix that work on multiple tables. Place a button inside the container and add a class name which make the button positioned outside the point of view. Works in 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%;
}

来源：https://stackoverflow.com/questions/30198241/tabbing-outside-of-handsontable-cells

标签

handsontable