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

Чтобы можно было отреагировать на изменение активности контрола, предоставляется 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('Необходимо ввести значение');
   }
}