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<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Введите имя" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле для ввода пароля (модификатор type в значении password)
Используется для создания поля для ввода пароля. Отличается от обычного тем, что все вводимые символы отображаются звездочками, точками или другими знаками в зависимости от используемого браузера.
Open in a new window<span class="input input_theme_islands input_size_m input_type_password i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Введите пароль" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="password"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'password'
},
placeholder: 'Введите пароль'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'password'
}
}
]
Поле для поиска (модификатор type в значении search)
Используется для создания поискового поля.
Open in a new window<span class="input input_theme_islands input_size_m input_type_search i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Введите запрос" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="search"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Введите запрос'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
}
}
]
Модификатор width
Допустимое значение: 'available'.
Способы использования: BEMJSON.
Позволяет растягивать текстовое поле на максимально допустимую ширину.
Open in a new window<span class="input input_theme_islands input_size_m input_width_available i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Введите имя" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
},
placeholder: 'Введите имя'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
Модификатор has-clear
Допустимое значение: true.
Способы использования: BEMJSON.
Добавляет крестик для очистки содержимого в текстовое поле.
Open in a new window<span class="input input_theme_islands input_size_m input_has-clear i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" value="Привет!" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"><span class="input__clear"></span></span>
</span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
'has-clear': true
},
val: 'Привет!'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
'has-clear': true
}
}
]
Модификатор disabled
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Open in a new window<span class="input input_theme_islands input_size_m input_disabled i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Введите имя" disabled="disabled" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
placeholder: 'Введите имя'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
Модификатор 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<span class="input input_theme_islands input_size_m input_type_search i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Введите запрос" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="search"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Введите запрос'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
}
}
]
Модификатор size
Допустимые значения для темы islands: 's', 'm', 'l', 'xl'.
Способ использования: BEMJSON.
Необходимо использовать с модификатором theme в значении islands.
Задает размер всем типам текстовых полей.
s
Open in a new window<span class="input input_theme_islands input_size_s i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Размер s" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 's'
},
placeholder: 'Размер s'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 's'
}
}
]
m
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Размер m" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Размер m'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
l
Open in a new window<span class="input input_theme_islands input_size_l i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Размер l" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'l'
},
placeholder: 'Размер l'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'l'
}
}
]
xl
Open in a new window<span class="input input_theme_islands input_size_xl i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Размер xl" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'xl'
},
placeholder: 'Размер xl'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
Специализированные поля блока
Поле name
Тип: String.
Определяет уникальное имя блока.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" name="Statistics" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Statistics'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле val
Тип данных: String.
Определяет содержимое поля ввода.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" name="Statistics" value="Привет!" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Statistics',
val: 'Привет!'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле placeholder
Тип данных: String.
Определяет текст подсказки в текстовом поле.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Введите имя" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле maxLength
Тип данных: Number.
Определяет максимальное количество вводимых символов.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" maxlength="20" placeholder="Введите имя" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя',
maxLength: 20
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле autocomplete
Тип данных: Boolean.
Отвечает за включение / выключение автозаполнения текстового поля в браузере.
Если поле autocomplete не задано, автозаполнение включено.
Для отключения автозаполнения используйте значение false:
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Введите имя" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя',
autocomplete: false
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле id
Тип данных: String.
Определяет уникальный идентификатор текстового поля.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" id="Unique_1" placeholder="Введите имя" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя',
id: 'Unique_1'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле tabIndex
Тип данных: Number.
Определяет последовательность перехода между контролами при нажатии на Tab.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" tabindex="3" placeholder="Введите имя" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя',
tabIndex: 3
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]