TextFieldТекстовое поле

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

Использование

При необходимости импортируйте компонент:

import 'mdui/components/text-field.js';

При необходимости импортируйте типы TypeScript:

import type { TextField } from 'mdui/components/text-field.js';

Пример использования:

<mdui-text-field label="Text Field"></mdui-text-field>

Используйте атрибут helper для задания вспомогательного текста внизу поля. Также можно использовать слот helper. Добавьте атрибут helper-on-focus, чтобы вспомогательный текст отображался только при фокусе на поле ввода.

Supporting text

<mdui-text-field label="Text Field" helper="Supporting text"></mdui-text-field>

<mdui-text-field label="Text Field">
  <span slot="helper" style="color: blue">Supporting text</span>
</mdui-text-field>

<mdui-text-field label="Text Field" helper="Supporting text" helper-on-focus></mdui-text-field>

Исходный код

Возможность очистки

Добавьте атрибут clearable, чтобы справа от текстового поля появлялась кнопка очистки, когда поле не пусто.

<mdui-text-field clearable label="Text Field" value="Input Text"></mdui-text-field>

Исходный код

Выравнивание текста по правому краю

Добавьте атрибут end-aligned, чтобы выровнять текст по правому краю.

<mdui-text-field end-aligned label="Text Field" value="Input Text"></mdui-text-field>

Исходный код

Префиксы, суффиксы и иконки

С помощью атрибутов icon и end-icon можно добавить иконки Material Icons слева и справа от текстового поля. Также можно использовать слоты icon и end-icon.

<mdui-text-field icon="search" end-icon="mic" label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Text Field">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

Исходный код

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

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Text Field">
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-text-field>

Исходный код

Режим только для чтения

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

<mdui-text-field readonly label="Text Field" value="Input Text"></mdui-text-field>

Исходный код

Отключенное состояние

Добавьте атрибут disabled, чтобы отключить текстовое поле.

<mdui-text-field disabled label="Text Field" value="Input Text"></mdui-text-field>

Исходный код

Многострочное текстовое поле

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

<mdui-text-field rows="3" label="Text Field"></mdui-text-field>

Исходный код

Также можно добавить атрибут autosize, чтобы поле автоматически подстраивало высоту под длину вводимого текста. С помощью атрибутов min-rows и max-rows можно задать минимальное и максимальное количество строк при автоматическом изменении высоты.

<mdui-text-field autosize label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Text Field"></mdui-text-field>

Исходный код

Счетчик символов

Когда атрибут maxlength установлен, можно добавить атрибут counter, чтобы внизу текстового поля отображался счетчик символов.

<mdui-text-field maxlength="20" counter label="Text Field"></mdui-text-field>

Исходный код

Поле для пароля

При установке type="password" добавление атрибута toggle-password добавляет кнопку переключения видимости пароля справа от поля.

<mdui-text-field type="password" toggle-password label="Text Field"></mdui-text-field>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Форма текстового поля. По умолчанию `filled`. Возможные значения: `filled` — текстовое поле с фоновым цветом, более выраженный визуальный акцент `outlined` — текстовое поле с рамкой, менее выраженный визуальный акцент
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
Тип ввода текстового поля. По умолчанию `text`. Возможные значения: `text` — значение по умолчанию. Текстовое поле `number` — только цифры. На устройствах с динамической клавиатурой отображается цифровая клавиатура `password` — для ввода пароля, значение скрывается `url` — для ввода URL, проверяет формат URL. На поддерживаемых устройствах отображается соответствующая клавиатура `email` — для ввода email, проверяет формат email. На поддерживаемых устройствах отображается соответствующая клавиатура `search` — для поля поиска. На устройствах с динамической клавиатурой иконка Enter меняется на иконку поиска `tel` — для ввода номера телефона. На устройствах с динамической клавиатурой отображается цифровая клавиатура телефона `hidden` — скрывает элемент, но его значение отправляется на сервер `date` — элемент для ввода даты (год, месяц, день, без времени). В поддерживаемых браузерах при активации открывается выбор даты `datetime-local` — элемент для ввода даты и времени без часового пояса. В поддерживаемых браузерах при активации открывается выбор даты `month` — элемент для ввода года и месяца, без часового пояса `time` — элемент для ввода времени, без часового пояса `week` — элемент для ввода даты в формате год-неделя, без часового пояса
`name`	`name`	`string`	`''`
Имя текстового поля, будет отправлено вместе с данными формы.
`value`	`value`	`string`	`''`
Значение текстового поля, будет отправлено вместе с данными формы.
	`defaultValue`	`string`	`''`
Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
`label`	`label`	`string`	-
Текст метки.
`placeholder`	`placeholder`	`string`	-
Текст-заполнитель.
`helper`	`helper`	`string`	-
Вспомогательный текст внизу текстового поля. Можно задать через `slot="helper"`.
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
Определяет, показывать ли вспомогательный текст только при фокусе.
`clearable`	`clearable`	`boolean`	`false`
Определяет, можно ли очистить текстовое поле.
`clear-icon`	`clearIcon`	`string`	-
Имя иконки Material Icons для кнопки очистки справа, когда поле можно очистить. Можно задать через `slot="clear-icon"`.
`end-aligned`	`endAligned`	`boolean`	`false`
Определяет, выравнивать ли текст по правому краю.
`prefix`	`prefix`	`string`	-
Текст-префикс текстового поля. Отображается только при фокусе или когда поле имеет значение. Можно задать через `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Текст-суффикс текстового поля. Отображается только при фокусе или когда поле имеет значение. Можно задать через `slot="suffix"`.
`icon`	`icon`	`string`	-
Имя иконки Material Icons для префикса слева. Можно задать через `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Имя иконки Material Icons для суффикса справа. Можно задать через `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Имя иконки Material Icons справа при ошибке валидации поля формы. Можно задать через `slot="error-icon"`.
`form`	`form`	`string`	-
Связанный элемент `<form>`. В качестве значения укажите `id` элемента `<form>` на той же странице. Если свойство не задано, элемент должен быть дочерним по отношению к `<form>`. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Только для чтения.
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключён ли компонент.
`required`	`required`	`boolean`	`false`
Определяет, обязательно ли для заполнения при отправке формы.
`rows`	`rows`	`number`	-
Фиксированное количество отображаемых строк (для `<textarea>`).
`autosize`	`autosize`	`boolean`	`false`
Автоматически подстраивать высоту под содержимое (для `<textarea>`).
`min-rows`	`minRows`	`number`	-
Минимальное количество строк при `autosize=true`.
`max-rows`	`maxRows`	`number`	-
Максимальное количество строк при `autosize=true`.
`minlength`	`minlength`	`number`	-
Минимальное количество символов.
`maxlength`	`maxlength`	`number`	-
Максимальное количество символов.
`counter`	`counter`	`boolean`	`false`
Определяет, показывать ли счётчик символов. Действует только при указании `maxlength`.
`min`	`min`	`number`	-
Минимальное числовое значение (при `type="number"`).
`max`	`max`	`number`	-
Максимальное числовое значение (при `type="number"`).
`step`	`step`	`number`	-
Шаг изменения числового значения (при `type="number"`).
`pattern`	`pattern`	`string`	-
Регулярное выражение для валидации формы.
`toggle-password`	`togglePassword`	`boolean`	`false`
При `type="password"` добавляет кнопку для отображения/скрытия пароля.
`show-password-icon`	`showPasswordIcon`	`string`	-
Имя иконки Material Icons для кнопки отображения пароля. Можно задать через `slot="show-password-icon"`.
`hide-password-icon`	`hidePasswordIcon`	`string`	-
Имя иконки Material Icons для кнопки скрытия пароля. Можно задать через `slot="hide-password-icon"`.
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
Нестандартный атрибут iOS для управления автокапитализацией. Действует в iOS5 и новее. Возможные значения: `none` — отключить капитализацию `sentences` — капитализация первого слова в предложении `words` — капитализация первого символа каждого слова `characters` — капитализация всех символов
`autocorrect`	`autocorrect`	`string`	-
Атрибут `autocorrect` элемента `<input>`.
`autocomplete`	`autocomplete`	`string`	-
Атрибут `autocomplete` элемента `<input>`.
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
Атрибут `enterkeyhint` элемента `<input>` для настройки текста или иконки на клавише Enter виртуальной клавиатуры. Отображение зависит от устройства и языка. Возможные значения: `enter` — вставить новую строку `done` — готово `go` — перейти `next` — далее `previous` — назад `search` — поиск `send` — отправить
`spellcheck`	`spellcheck`	`boolean`	`false`
Определяет, включена ли проверка орфографии.
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
Атрибут `inputmode` элемента `<input>` для настройки типа виртуальной клавиатуры. Возможные значения: `none` — без виртуальной клавиатуры. Полезно при реализации собственного ввода `text` — стандартная текстовая клавиатура `decimal` — клавиатура для ввода десятичных чисел, может содержать десятичную точку `.` или запятую `,` `numeric` — цифровая клавиатура (0-9) `tel` — телефонная клавиатура, содержит цифры 0-9, звёздочку `*` и решётку `#` `search` — клавиатура, оптимизированная для поиска, кнопка отправки обычно показывает `search` или «Поиск» `email` — клавиатура, оптимизированная для ввода email, обычно содержит `@` и `.` `url` — клавиатура, оптимизированная для ввода URL, обычно содержит `.`, `/`, `#`
	`validity`	`ValidityState`	-
Объект, содержащий состояние валидации формы. См. `ValidityState`.
	`validationMessage`	`string`	-
Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
	`valueAsNumber`	`number`	-
Получает текущее значение в виде числа `number`; или задаёт значение в виде числа. Если значение не может быть преобразовано в число, возвращается `NaN`.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.

Методы

Название	Параметры	Возвращаемое значение
`select`		`void`
Выделяет текст в текстовом поле.
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
Выделяет определённый диапазон текста в текстовом поле.
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
Заменяет текст в определённом диапазоне на новый текст.
`checkValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`.
`reportValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`. Если проверка не пройдена, также отображает сообщение об ошибке валидации в компоненте.
`setCustomValidity`	`message: string`	`void`
Устанавливает пользовательский текст сообщения об ошибке. Пока задан непустой текст, поле считается не прошедшим проверку.
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.

События

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.
`change`
Срабатывает при изменении значения и потере фокуса.
`input`
Срабатывает при изменении значения.
`invalid`
Возникает, когда поле формы не проходит валидацию.
`clear`
Срабатывает при клике на кнопку очистки, добавленную свойством `clearable`. Можно отменить очистку, вызвав `event.preventDefault()`.

Slots

Название
`icon`
Иконка слева.
`end-icon`
Иконка справа.
`error-icon`
Иконка справа в состоянии ошибки валидации.
`prefix`
Текст слева.
`suffix`
Текст справа.
`clear-button`
Кнопка очистки.
`clear-icon`
Иконка внутри кнопки очистки.
`toggle-password-button`
Кнопка переключения видимости пароля.
`show-password-icon`
Иконка внутри кнопки переключения пароля в режиме отображения пароля.
`hide-password-icon`
Иконка внутри кнопки переключения пароля в режиме скрытия пароля.
`helper`
Вспомогательный текст внизу.

CSS Parts

Название
`container`
Контейнер текстового поля.
`icon`
Иконка слева.
`end-icon`
Иконка справа.
`error-icon`
Иконка справа в состоянии ошибки валидации.
`prefix`
Текст слева.
`suffix`
Текст справа.
`label`
Текст метки сверху.
`input`
Внутренний элемент `<input>` или `<textarea>`.
`clear-button`
Кнопка очистки.
`clear-icon`
Иконка внутри кнопки очистки.
`toggle-password-button`
Кнопка переключения видимости пароля.
`show-password-icon`
Иконка внутри кнопки переключения пароля в режиме отображения пароля.
`hide-password-icon`
Иконка внутри кнопки переключения пароля в режиме скрытия пароля.
`supporting`
Контейнер вспомогательной информации внизу, включая helper, error, counter.
`helper`
Вспомогательный текст внизу.
`error`
Текст ошибки внизу.
`counter`
Счётчик символов справа внизу.

Предыдущая глава

Tabs Вкладки

Следующая глава

Tooltip Тултип