Поля ввода

Любое поле ввода имеет явное назначение — его нужно заполнить.
Стиль поля показывает, какую информацию нужно ввести. Все поля ввода подразделяются на:

  • текстовые,
  • числовые,
  • поля ввода даты и времени,
  • специализированные.

Значение поля

Введенное значение для полей ввода устанавливается опцией value. Тип введенного значения соответствует применённому полю.

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

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

В следующем примере для поля ввода Controls/input:Text связаны опция value и свойство myText.

  • JavaScript
    var myControl = Base.Control.extend({
       _template: template,
       myText: 'Hello, world!'
    });
  • WML
    <Controls.input:Text bind:value="myText" />

У полей ввода есть отступ между текстом и левой границей поля, из-за этой особенности при переключении в режим чтения может наблюдаться скачок текста.

Чтобы избежать этого, рекомендуется навесить css-класс controls-Input_negativeOffset_theme_{{_options.theme}} на поле ввода, который компенсирует отступ, сдвинув поле ввода влево. Это позволит тексту в режиме редактирования и в режиме чтения находиться на одной линии.

Индикатор поля ввода

Любому из перечисленных полей можно установить цветную метку с помощью значений опции tagStyle:

Изменение поведения обработки ввода

Стандартное поведение обработки введенного значения может не соответствовать требованиям поставленной задачи. Для таких случаев предусмотрена опция inputCallback.

В опцию передается функция, которая будет вызвана после основного процесса обработки входных данных.

Валидация вводимых данных

Проверяются введенные данные с помощью механизма валидации.

Валидация проводится с помощью контролов из библиотеки Controls/validate.

Схема валидации представлена на следующем рисунке.

Рис.1. Схема валидации полей ввода.

Поле ввода передает валидатору значение опции value.

Валидатор возвращает полю ввода результат — значение опции validationStatus.

В случае ошибки будет изменен стиль отображения поля, появится всплывающая подсказка с сообщением об ошибке. Всплывающая подсказка будет открываться контролом Controls/validate:InputContainer.

Пример валидации поля Controls/input:Text с помощью контрола валидации Controls/validate:Container:

<Controls.validate:Container>
   <ws:validators>
      <ws:Function value="{{_phoneNumber}}">MyControl/MyValidator</ws:Function>
   </ws:validators>
   <ws:content>
      <Controls.input:Text name="textBox" bind:value="_phoneNumber" />
   </ws:content>
</Controls.validate:Container>

Стандартные валидаторы

События ввода данных

Интересующие события:

  • inputCompleted — срабатывает при завершении ввода (ухода фокуса / клик по кнопке Enter),
  • valueChanged — срабатывает при изменении значения value.

В обработчик приходит значение value, при изменении — новое значение.

  • JavaScript
    <Controls.input:Text
        ...
        on:valueChanged="_eventHandler()"
        on:inputCompleted="_eventHandler()"
    />
  • WML
    _eventHandler: function(e, value) {
       this._eventResult = e.type + ': ' + value;
    },