Handsontable - как отключить клавишу ВВОД в флажке
Я хочу использовать HandsOnTable (кстати, отличный инструмент) для ввода табличных данных со многими цифрами, поэтому нужна поддержка цифровой клавиатуры. В частности, это означает, что клавиша ENTER должна вести себя как клавиша TAB, то есть при нажатии перейти к следующей ячейке в той же строке или в конце строки перейти к первой ячейке следующей строки.
autoWrapRow: true
делает все это легко для клавиши TAB
enterMoves: function () {
var maxCol = hot.getCellMeta(0, 0).columns.length-1
if(hot.getSelected()[1] >= maxCol) {
return {row: 1, col: -maxCol}
} else {
return {row: 0, col: 1}
}
}
делает это для клавиши ВВОД
Пока все хорошо - к сожалению, у меня есть также поля с флажками в строке. И здесь поведение отличается: каждое ENTER переключает флажок, но не закрывает ячейку и не перемещается. Таким образом, запись данных висит в флажке, пока не будет перемещена с помощью TAB или щелчка мышью.
Я пытался это исправить с помощью:
beforeKeyDown: function (e) {
var sel = hot.getSelected();
var typ = hot.getCellMeta(sel[0], sel[1]).type;
if (e.keyCode === 13 && typ == 'checkbox') {
e.stopImmediatePropagation();
}
}
Но это не работает, то есть то же поведение, что и без функции beforeKeyDown.
Смотрите также jsFiddle
В строке handsontable.full.js (0.20.2) есть только
beginEditing: function() {
var checkbox = this.TD.querySelector('input[type="checkbox"]');
if (!hasClass(checkbox, 'htBadValue')) {
checkbox.click();
}
}
так что переключение флажка не зависит от того, какая клавиша была нажата, поэтому я не вижу способа изменить checkboxEditor. Кажется, это функциональность EditorManager, решающая, что TAB не передается в редактор, а ENTER. EditorManager не доступен для программирования. Handsontable документы описывают beforeKeyDown как единственный способ повлиять на EditorManager. Но как в этом случае?
cbEditor = hot.getCellEditor(sel[0], sel[1]);
cbEditor.prototype.close();
// or
cbEditor.prototype.discardEditor();
не являются решением. Пользовательский рендерер может быть идеей, так как есть функция onBeforeKeyDown, которая обрабатывает SPACE, ENTER, DELETE, BACKSPACE.
Поэтому я попробовал способ через selectCell:
beforeKeyDown: function(e) {
var sel = hot.getSelected();
var typ = hot.getCellMeta(sel[0], sel[1]).type;
if (e.keyCode === 13 && typ == 'checkbox') {
// e.stopImmediatePropagation();
// seams to be not necessary - no effect
var row = sel[0];
var col = sel[1] + 1;
if (col >= hot.getCellMeta(0, 0).columns.length) {
row += 1;
col = 0;
}
hot.selectCell(row, col);
}
}
Это работает до сих пор, является несколько грязным (реализация переноса строки дважды), но все еще имеет небольшую ошибку: если флажок находится в последнем столбце и ничего не введено в строку, ENTER переключает, но перемещается в следующую строку.
Больше под jsFiddle
Буду признателен за любые дальнейшие идеи...
1 ответ
Немного поздно, но, чтобы обойти это, нужно изменить источник
handsontable.full.js (0.25.1)
Внутри
function checkboxRenderer(instance, TD, row, col, prop, value, cellProperties) {}
Здесь
function onBeforeKeyDown(event){}
изменить так
function onBeforeKeyDown(event) {
// **Original** var allowedKeys = [KEY_CODES.SPACE, KEY_CODES.ENTER, KEY_CODES.DELETE, KEY_CODES.BACKSPACE];
var allowedKeys = [KEY_CODES.SPACE, KEY_CODES.DELETE, KEY_CODES.BACKSPACE];
if (allowedKeys.indexOf(event.keyCode) !== -1 && !isImmediatePropagationStopped(event)) {
eachSelectedCheckboxCell(function() {
stopImmediatePropagation(event);
event.preventDefault();
});
}
// **Original** if (event.keyCode === KEY_CODES.SPACE || event.keyCode === KEY_CODES.ENTER) {
if (event.keyCode === KEY_CODES.SPACE ) {
toggleSelected();
}
if (event.keyCode === KEY_CODES.DELETE || event.keyCode === KEY_CODES.BACKSPACE) {
toggleSelected(false);
}
}
ура