Форум

Методология

Инструментарий

Платформа

Сообщество

desktop
touch-pad
touch-phone

input

Используется для создания различных типов текстовых полей.

Обзор блока

Модификаторы блока

Модификатор Допустимые значения Способы использования Описание
type 'password', 'search' BEMJSON Тип текстового поля.
width 'available' BEMJSON Максимально допустимая ширина текстового поля.
has-clear true BEMJSON Крестик для очистки поля ввода.
disabled true BEMJSON, JS Неактивное состояние.
focused true BEMJSON, JS Фокус на блоке.
theme 'islands' BEMJSON Стилевое оформление.
size 's', 'm', 'l', 'xl' BEMJSON Размер текстового поля. Используется только с модификатором theme в значении islands.

Специализированные поля блока

Поле Тип Описание
name String Уникальное имя блока.
val String, Number Содержимое поля ввода, указанное по умолчанию.
placeholder String Подсказка в текстовом поле.
maxLength String Максимальное количество вводимых символов.
autocomplete Boolean Браузерное автозаполнение в текстовом поле.
id String Уникальный идентификатор текстового поля.
tabIndex Number Последовательность перехода между контролами при нажатии на Tab.

Описание блока

Блок input служит для создания различных типов текстовых полей.

Модификаторы блока

Модификатор type

Допустимые значения: 'password', 'search'.

Способ использования: BEMJSON.

Модификатор type используется для изменения типа текстового поля.

По умолчанию (если модификатор type не установлен) блок input является обычным полем ввода.

Open in a new window
Поле для ввода пароля (модификатор type в значении password)

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

Open in a new window
Поле для поиска (модификатор type в значении search)

Используется для создания поискового поля.

Open in a new window

Модификатор width

Допустимое значение: 'available'.

Способы использования: BEMJSON.

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

Open in a new window

Модификатор has-clear

Допустимое значение: true.

Способы использования: BEMJSON.

Добавляет крестик для очистки содержимого в текстовое поле.

Open in a new window

Модификатор disabled

Допустимое значение: true.

Способы использования: BEMJSON, JS.

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

Open in a new window

Модификатор focused

Допустимое значение: true.

Способы использования: BEMJSON, JS.

Выставляется автоматически при получении блоком фокуса.

Отвечает за наличие фокуса на блоке.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', focused : true },
    placeholder : 'Введите имя'
}

Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.

Модификатор theme

Допустимое значение: 'islands'.

Способ использования: BEMJSON.

Отвечает за стилевое оформление блока.

Необходимо использовать с модификатором size.

Open in a new window

Модификатор size

Допустимые значения для темы islands: 's', 'm', 'l', 'xl'.

Способ использования: BEMJSON.

Необходимо использовать с модификатором theme в значении islands.

Задает размер всем типам текстовых полей.

s

Open in a new window

m

Open in a new window

l

Open in a new window

xl

Open in a new window

Специализированные поля блока

Поле name

Тип: String.

Определяет уникальное имя блока.

Open in a new window

Поле val

Тип данных: String.

Определяет содержимое поля ввода.

Open in a new window

Поле placeholder

Тип данных: String.

Определяет текст подсказки в текстовом поле.

Open in a new window

Поле maxLength

Тип данных: Number.

Определяет максимальное количество вводимых символов.

Open in a new window

Поле autocomplete

Тип данных: Boolean.

Отвечает за включение / выключение автозаполнения текстового поля в браузере.

Если поле autocomplete не задано, автозаполнение включено.

Для отключения автозаполнения используйте значение false:

Open in a new window

Поле id

Тип данных: String.

Определяет уникальный идентификатор текстового поля.

Open in a new window

Поле tabIndex

Тип данных: Number.

Определяет последовательность перехода между контролами при нажатии на Tab.

Open in a new window
Instance methods:
getVal
setVal

Block input

Augments:control

Instance methods:

getVal():Stringoverride
description
Returns control value
setVal(val, [data]):input
description
Sets control value
parameters
val
String
value
data
Object
additional data