События активности

Чтобы можно было отреагировать на изменение активности контрола, предоставляется 2 события:

  • activated (контрол активирован)
  • deactivated (контрол деактивирован)

На эти события можно подписаться только у контролов, так как только контрол обладает состоянием активности.

Вычисление активности контролов вслед за изменением фокуса

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

При переводе фокуса с элемента input 1-1-1 на элемент input 1-2-1 будут вызваны события фокусов и события активности. Сначала сработают нативные события, а потом события активности.

  1. Событие потери фокуса focusout сработает на элементах:
    • input 1-1-1
    • div 1-1
    • div 1
  2. Событие получения фокуса focusin сработает на элементах:
    • input 1-2-1
    • div 1-2
    • div 1

У контрола 1 события активности deactivated и activated вызваны не будут, потому что он не деактивировался и не активировался. Он как был активирован, так и остался активирован (по 2 признаку). Активация переходила среди его дочерних элементов.

  1. Событие deactivated сработает:
    • на контроле 1-1-1
    • контроле 1-1
  2. Событие activated сработает:
    • на контроле 1-2-1
    • контроле 1-2

Событие activated

Если контрол становится активным, на нем срабатывает событие activated. Событие также будет содержать дополнительную информацию:

  • isTabPressed — значение true означает, что активность перешла переходом по Tab, значение false означает, что активность перешла по клику.
  • isShiftKey — значение true означает, что активность перешла переходом по Tab в обратном порядке (с использованием клавиши shift).
  • keyPressedData - если фокус происходит во время нажатия какой-либо клавиши (не только Tab), в событие отправляется информация об этом нажатии (название клавиши и т.д.).

В качестве примера очистим значение поля ввода, если оно было активировано переходом по Tab.

Шаблон контрола Example:

<!-- WML -->
<Controls.input:Number bind:value="value" on:activated="clearValue()"/>

Контроллер шаблона Example:

// TypeScript
clearValue(event, config): void {
   if (config.isTabPressed) {
      this.value = '';
   }
}

Событие deactivated

Если контрол становится неактивным, на нем срабатывает событие deactivated. Событие также будет содержать дополнительную информацию:

  • isTabPressed — значение true означает, что активность перешла переходом по Tab, значение false означает, что активность перешла по клику.
  • isShiftKey — значение true означает, что активность перешла переходом по Tab в обратном порядке (с использованием клавиши shift).

В качестве примера провалидируем введенное значение в поле ввода при деактивации.

Шаблон контрола Example:

<!-- WML -->
<Controls.input:Number bind:value="value" on:deactivated="validate()"/>

Контроллер шаблона Example:

// TypeScript
validate(event, config): void {
   if (!this.value) {
      this.showWarning('Необходимо ввести значение');
   }
}