Навигация с клавиатуры

Навигация с клавиатуры является важной составляющей интерактивных веб-приложений, обеспечивая удобство работы и доступность интерфейса. Knockout.js предоставляет гибкие механизмы для связывания данных и управления событиями, что позволяет эффективно реализовать обработку клавиатурных событий и перемещение фокуса между элементами интерфейса.

Привязка событий клавиатуры

Knockout.js использует event binding для обработки событий DOM, включая клавиатурные:

<input type="text" data-bind="event: { keyup: onKeyUp }" />

В модели представления:

function ViewModel() {
    this.inputValue = ko.observable('');

    this.onKe yUp = function(data, event) {
        if (event.key === "Enter") {
            console.log("Нажата клавиша Enter:", data);
        }
        return true; // Позволяет продолжить стандартное поведение
    };
}

ko.applyBindings(new ViewModel());

Особенности использования:

Аргумент event предоставляет полный объект события, включая key, code, ctrlKey и другие свойства.
Метод возвращает true или false для контроля стандартного поведения браузера.
Можно связывать обработку с любым HTML-элементом, не ограничиваясь <input>.

Навигация между элементами с помощью табуляции

Для управления фокусом между элементами формы используется метод focus. Knockout.js позволяет связывать состояние фокуса с observables:

<input type="text" data-bind="value: firstName, hasFocus: isFirstNameFocused" />
<input type="text" data-bind="value: lastName, hasFocus: isLastNameFocused" />

В модели:

function ViewModel() {
    this.firstName = ko.observable('');
    this.lastName = ko.observable('');

    this.isFirstNameFocused = ko.observable(true);
    this.isLastNameFocused = ko.observable(false);

    this.moveFocusToLastName = function() {
        this.isFirstNameFocused(false);
        this.isLastNameFocused(true);
    };
}

ko.applyBindings(new ViewModel());

Ключевые моменты:

hasFocus автоматически устанавливает фокус на элемент при значении true.
Можно комбинировать с обработкой клавиш для создания последовательной навигации по форме.

Реализация горячих клавиш

Для глобальной навигации и запуска действий через клавиши удобно использовать подписки на keydown или keyup на документе:

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === "S") {
        event.preventDefault();
        console.log("Сохранение данных");
    }
});

Knockout.js может использовать observables для отслеживания состояния клавиш:

function ViewModel() {
    this.ctrlPressed = ko.observable(false);

    this.updateCtrlState = function(data, event) {
        this.ctrlPressed(event.ctrlKey);
        return true;
    };
}

ko.applyBindings(new ViewModel());

Привязка к элементу:

<div data-bind="event: { keydown: updateCtrlState, keyup: updateCtrlState }"></div>

Это позволяет динамически реагировать на сочетания клавиш и управлять состоянием интерфейса через observables.

Пошаговая навигация в списках

Для реализации навигации по спискам элементов, например, с использованием стрелок, удобно связывать индекс выделенного элемента с observable:

function ViewModel() {
    this.items = ko.observableArray(["Элемент 1", "Элемент 2", "Элемент 3"]);
    this.selectedIndex = ko.observable(0);

    this.onKeyD own = function(data, event) {
        if (event.key === "ArrowDown") {
            this.selectedIndex(Math.min(this.items().length - 1, this.selectedIndex() + 1));
        }
        if (event.key === "ArrowUp") {
            this.selectedIndex(Math.max(0, this.selectedIndex() - 1));
        }
        return true;
    };
}

ko.applyBindings(new ViewModel());

Привязка отображения активного элемента:

<ul data-bind="foreach: items, event: { keydown: onKeyDown }">
    <li data-bind="text: $data, css: { selected: $index() === $parent.selectedIndex() }"></li>
</ul>

Важные аспекты:

Observable selectedIndex позволяет отслеживать текущий выбор и синхронизировать с UI.
CSS-класс selected обеспечивает визуальное выделение.
Поддержка клавиш стрелок упрощает перемещение фокуса без вмешательства в DOM напрямую.

Комбинация клавиш и динамические действия

Можно реализовать сложные сочетания клавиш, используя несколько observables для состояния модификаторов и основного события:

function ViewModel() {
    this.ctrl = ko.observable(false);
    this.shift = ko.observable(false);

    this.handleKey = function(data, event) {
        this.ctrl(event.ctrlKey);
        this.shift(event.shiftKey);

        if (this.ctrl() && this.shift() && event.key === "N") {
            console.log("Создание нового элемента");
        }

        return true;
    };
}

ko.applyBindings(new ViewModel());

Привязка:

<div data-bind="event: { keydown: handleKey, keyup: handleKey }"></div>

Такой подход позволяет построить полноценную систему горячих клавиш, реагирующую на одновременное нажатие нескольких клавиш и модификаторов.