Перейти к основному содержимому

Input

Отображает поле ввода

Является дочерним компонентом компонента Form или дочерним компонентом экранной формы. Может использоваться как поле поиска. В зависимости от типа вводимых данных имеет следующие режимы работы:

  • Text: Режим ввода текстовой информации.
  • Password: Режим ввода пароля с возможностью отобразить/скрыть пароль и очистить поле ввода.
  • Hidden: Режим скрытого поля ввода.
  • Number: Режим ввода вещественного числа.
  • Int: Режим ввода целого числа.
  • Search: Режим поиска текстовой и числовой информации на родительском компоненте Form или на родительской экранной форме. Каждый из режимов возвращает значение строкового типа данных. Реализует возможность отображения ошибок.
<Input 
  Mode="Text" 
  HighlightError={true} 
  Error={() => 'Максимальная длина текста описания ошибки составляет две строки. Если текст длиннее ...'} 
  Model-var="LongErrorInput" 
  Label="LongErrorInput" 
/>

Свойства​

AutoComplete​

Тип поля для автозаполнения браузером

Тип: string

Значение по умолчанию: new-password

AutoCompleteList​

Массив значений для свойства Mode со значением Autocomplete

Тип: array

Autofocus​

Признак установки фокуса на компонент при загрузке страницы

Тип: boolean

Badge​

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS​

Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

DataHint​

Текст, отображаемый при наведении указателя мыши на значок в виде кружка с буквой i. Это свойство актуально только для дочерних компонентов компонента Form и имеет смысл только при одновременном использовании свойства Label компонента

Тип: string

DecrementTooltipLabel​

Подсказка к стрелке уменьшения значения в поле ввода

Тип: string

Значение по умолчанию: Уменьшить

Disabled​

Признак запрета на редактирование компонента

Тип: boolean

Error​

Текст ошибки при валидации компонента или undefined/false, если при валидации не обнаружены ошибки. Пример использования Error см. в статье Валидация данных перед отправкой на сервер

Тип: boolean

ErrorMessage​

Сообщение об ошибке при валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо ErrorMessage рекомендуется использовать свойство Error

Тип: string

Focused​

Признак установки фокуса на компонент в процессе работы приложения

Тип: boolean

Hidden​

Признак состояния компонента Скрыт

Тип: boolean

HidePasswordTooltipLabel​

Подсказка к значку скрытия значения вводимого пароля

Тип: string

Значение по умолчанию: Скрыть пароль

HighlightError​

Признак подсвечивания ошибки

Тип: boolean

Значение по умолчанию: True

Hint​

Подсказка над компонентом

Тип: string

HintPosition​

Позиция для отображения текста, определенного в свойстве DataHint

Тип: enum

Значение по умолчанию: right

Возможные значения:

left - Слева right - Справа top - Сверху bottom - Снизу topRight - Сверху справа topLeft - Сверху слева bottomRight - Снизу справа bottomLeft - Снизу слева

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

IncrementTooltipLabel​

Подсказка к стрелке увеличения значения в поле ввода

Тип: string

Значение по умолчанию: Увеличить

Label​

Надпись над компонентом

Тип: string

MaxLength​

Максимальная длина вводимой строки

Тип: number

Значение по умолчанию: 30

Mode​

Режим работы компонента в зависимости от типа вводимых данных

Тип: enum

Значение по умолчанию: Text

Возможные значения:

Text - Режим ввода текстовой информации Password - Режим ввода пароля с возможностью отобразить/скрыть пароль и очистить поле ввода Hidden - Режим скрытого поля ввода Number - Режим ввода вещественного числа Int - Режим ввода целого числа Search - Режим поиска текстовой и числовой информации на родительском компоненте Form или на родительской экранной форме Autocomplete - Режим ввода с подсказкой на основе возможных вариантов автозаполнения. Комбинируется с другими режимами, кроме Password

Model​

Псевдоним свойств Value и OutputValue. Пример использования Model см. в статье Валидация данных перед отправкой на сервер

Тип: any

NoWriteOnInit​

Признак отказа от записи данных в переменную, заданную в свойствах OutputValue или Model, при создании компонента

Тип: boolean

OnBlur​

Обработчик события потери фокуса компонентом. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа FocusEvent. Пример:

OnBlur={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль
  console.log(event);
}

Тип: undefined

OnChange​

Обработчик события изменения свойства Value компонента. Не имеет параметров. Пример:

OnChange={() => {
  // Вывод сообщения в консоль
  console.log("Компонент изменен");
}}

Тип: undefined

OnClick​

Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на компоненте.

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:

OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnDelay​

Обработчик события изменения свойства Value компонента, вызываемый по истечении секунды после последнего изменения Value. Не имеет параметров. Пример:

OnDelay={() => {
  // Вывод сообщения в консоль
  console.log("Прошло более секунды после изменения компонента");
}

Тип: undefined

OnEnterKeyDown​

Обработчик события нажатия кнопки Enter. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример:

OnEnterKeyDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль
  console.log(event);
}

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

OutputState​

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

Тип: any

OutputValue​

Выходной параметр компонента: введенное или выбранное в компоненте значение

Тип: any

ReadOnly​

Признак запрета на редактирование компонента c возможностью копирования содержимого

Тип: boolean

Required​

Признак обязательности заполнения. Не влияет на валидацию, отображает звездочку справа от компонента

Тип: boolean

ResetTooltipLabel​

Подсказка к значку сброса текста

Тип: string

Значение по умолчанию: Очистить поле

ShowPasswordTooltipLabel​

Подсказка к значку отображения значения вводимого пароля

Тип: string

Значение по умолчанию: Показать пароль

Slot​

Именованное пространство во фрагменте экранной формы.

Тип: string

Text​

Заполнитель (Placeholder)

Тип: string

Tooltip​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне

Тип: any

TraceId​

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

Тип: string

Validation​

Признак ошибки валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо Validation рекомендуется использовать свойство Error

Тип: boolean

Value​

Входной параметр компонента: введенное или выбранное в компоненте значение

Тип: any

Visible​

Признак инверсии состояния компонента Скрыт

Тип: boolean

Значение по умолчанию: True

Примеры​

Данные:

  "TextInput": "Текст, не помещающийся в заданную область, обрезается и замещается многоточием и подсказкой", "AutoCompleteList": ["январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь"]
}

JSX:

<Group Mode="Column" >
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Text" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Режим ввода текстовой информации" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Text="Заполнитель" Label="Надпись" Model-var="normalText" Mode="Text" CSS={['mt-18']} />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input Error={() => 'Error'} Value="Текст, не помещающийся в заданную область, обрезается и замещается многоточием и подсказкой" Label="Надпись" Mode="Text" />
    </Group>
  </Group>
    
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Search" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Режим поиска текстовой и числовой информации на родительском компоненте Form или на родительской экранной форме" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Text="Поиск" Label="Надпись" Model-var="searchText" Mode="Search" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input Error={() => 'Максимальная длина текста описания ошибки составляет две строки. Если текст длиннее, и его невозможно сократить, текст обрезается и замещается многоточием и подсказкой'} Value="Текст" Label="Надпись" Mode="Text" />
    </Group>
  </Group>
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Autocomplete" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Режим ввода с подсказкой на основе возможных вариантов автозаполнения. Комбинируется с другими режимами, кроме Password" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Text="Например, Январь" Label="Месяц" Model-var="fl" Mode="Autocomplete" AutoCompleteList-var="AutoCompleteList" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input Text="Например, Январь" Label="Месяц" Mode="Autocomplete" Value="январь" />
    </Group>
  </Group>
    
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Password" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Режим ввода пароля с возможностью отобразить/скрыть пароль и очистить поле ввода" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Text="Введите пароль" Label="Пароль" Model-var="passwordText" Mode="Password" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input Value="Текст" Label="Пароль" Mode="Password" />
    </Group>
  </Group>
    
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Number" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Режим ввода вещественного числа с возможностью очистить поле ввода" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Text="Например, 30" Label="Количество (штук)" Model-var="numberText" Mode="Number" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input  Value="25" Label="Количество (штук)" Mode="Number" />
    </Group>
  </Group>
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Режимы" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Disabled и ReadOnly" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Disabled={true} Text="Текст" Label="Disabled" Value="Текст" Mode="Text" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input ReadOnly={true} Value="25" Label="ReadOnly" Mode="Number" />
    </Group>
  </Group>
    
</Group>