Управление фокусом

Slim.js — это лёгкая библиотека для создания реактивных веб-компонентов на JavaScript. Одной из ключевых возможностей при построении интерактивного интерфейса является управление фокусом элементов на странице. Фокус влияет на доступность, удобство навигации и поведение событий клавиатуры.

Принципы работы с фокусом

В HTML и JavaScript фокус определяется атрибутом tabindex и методами focus() и blur(). Slim.js позволяет управлять фокусом через реактивные свойства компонента, что обеспечивает синхронизацию состояния интерфейса и DOM.

  • focus() — переводит фокус на элемент.
  • blur() — убирает фокус с элемента.
  • Атрибут tabindex управляет порядком обхода элементов при навигации с клавиатуры.

В Slim.js эти методы можно вызывать на ссылках на элементы, получаемых через ref или через стандартные селекторы DOM внутри компонента.

Использование ref для фокусировки

Slim.js поддерживает механизм ссылок на элементы через атрибут ref. Это позволяет получить прямой доступ к элементу DOM из кода компонента.

class InputFocus extends Slim {
  get template() {
    return `
      <input type="text" ref="username" placeholder="Имя пользователя">
      <button oncl ick="${this}._setFocus">Фокус на поле</button>
    `;
  }

  _setFocus() {
    this.$refs.username.focus();
  }
}

customElements.define('input-focus', InputFocus);

В примере выше ref="username" создаёт ссылку this.$refs.username, через которую можно вызвать метод focus() для установки фокуса на поле ввода.

Реактивное управление фокусом

Slim.js позволяет связывать состояние фокуса с реактивными свойствами компонента. Это полезно, когда фокус должен зависеть от условий интерфейса или данных.

class ReactiveFocus extends Slim {
  constructor() {
    super();
    this.focusInput = false;
  }

  get template() {
    return `
      <input type="text" ref="inputField">
      <button oncl ick="${this}._toggleFocus">Переключить фокус</button>
    `;
  }

  _toggleFocus() {
    this.focusInput = !this.focusInput;
    if (this.focusInput) {
      this.$refs.inputField.focus();
    } else {
      this.$refs.inputField.blur();
    }
  }
}

customElements.define('reactive-focus', ReactiveFocus);

Здесь свойство focusInput управляет фокусом. Изменение свойства инициирует программную установку или снятие фокуса, что делает управление более предсказуемым.

Управление порядком табуляции

Атрибут tabindex используется для контроля порядка обхода элементов клавишей Tab. В Slim.js его можно задавать динамически через реактивные выражения.

<input type="text" tabindex="${this.isActive ? 1 : -1}">
  • tabindex="0" — элемент включён в естественный порядок табуляции.
  • tabindex="-1" — элемент исключён из навигации по клавише Tab, но доступен через focus().
  • Положительные значения определяют точный порядок обхода элементов.

Динамическая установка tabindex позволяет реализовать сложные сценарии навигации, например, переключение между полями формы в зависимости от состояния интерфейса.

Обработка событий фокуса

Slim.js поддерживает стандартные события focus и blur, которые можно использовать для изменения состояния компонента или запуска логики в момент получения/потери фокуса.

<input type="text"
       onfo cus="${this}._onFocus"
       onb lur="${this}._onBlur">

Методы компонента могут изменять визуальное состояние или реактивные свойства:

_onFocus() {
  this.hasFocus = true;
}

_onBlur() {
  this.hasFocus = false;
}

С помощью реактивного состояния можно, например, подсвечивать активное поле, отображать подсказки или валидировать ввод по мере фокусировки.

Перенос фокуса между элементами

В сложных формах часто требуется автоматическая навигация между элементами при определённых условиях. Slim.js позволяет управлять фокусом с помощью методов компонентов:

class AutoFocusForm extends Slim {
  get template() {
    return `
      <input type="text" ref="first" maxlength="3" onin put="${this}._nextField">
      <input type="text" ref="second" maxlength="3">
    `;
  }

  _nextField(e) {
    if (e.target.value.length >= 3) {
      this.$refs.second.focus();
    }
  }
}

customElements.define('auto-focus-form', AutoFocusForm);

В этом примере после ввода трёх символов фокус автоматически переносится на следующий элемент формы.

Фокусировка при монтировании компонента

Slim.js предоставляет хуки жизненного цикла, например onAdded(), которые можно использовать для установки фокуса при рендере компонента.

class MountedFocus extends Slim {
  get template() {
    return `<input type="text" ref="inputField">`;
  }

  onAdded() {
    this.$refs.inputField.focus();
  }
}

customElements.define('mounted-focus', MountedFocus);

Такой подход обеспечивает готовность интерфейса к взаимодействию сразу после появления компонента в DOM.

Советы по доступности

  • Всегда использовать явные tabindex для интерактивных элементов, которые не являются стандартными кнопками или ссылками.
  • Обрабатывать события focus и blur для визуальной индикации активности.
  • Не скрывать элементы с display: none или visibility: hidden, если требуется, чтобы они были доступны через focus().
  • Автоматическая фокусировка должна быть предсказуемой, чтобы не мешать навигации клавиатурой.

Эффективное управление фокусом в Slim.js сочетает реактивность компонентов, прямую работу с DOM через ref и корректную обработку событий. Это позволяет создавать динамичные, удобные и доступные интерфейсы, полностью управляемые из кода компонента.

Оглавление