在可操纵的单元格外部进行制表 [英] Tabbing outside of handsontable cells

问题描述

handsontable的底部有一个按钮.当用户在最后一个单元格中进行标签切换时，我们可以选择按钮，而不是返回到第一个单元格吗?

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?

这是 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>

推荐答案

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

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.

这篇关于在可操纵的单元格外部进行制表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！