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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Введите имя"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле для ввода пароля (модификатор 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Введите пароль" type="password"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'password'
},
placeholder: 'Введите пароль'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'password'
}
}
]
deps
Поле для поиска (модификатор 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Введите запрос" type="search"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Введите запрос'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
}
}
]
deps
Модификатор 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Введите имя"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
},
placeholder: 'Введите имя'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
deps
Модификатор 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" value="Привет!"><span class="input__clear"></span></span>
</span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
'has-clear': true
},
val: 'Привет!'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
'has-clear': true
}
}
]
deps
Модификатор 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Введите имя" disabled="disabled"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
placeholder: 'Введите имя'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
Модификатор 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Введите запрос" type="search"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Введите запрос'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
}
}
]
deps
Модификатор 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Размер s"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 's'
},
placeholder: 'Размер s'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 's'
}
}
]
deps
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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Размер m"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Размер m'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Размер l"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'l'
},
placeholder: 'Размер l'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'l'
}
}
]
deps
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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Размер xl"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'xl'
},
placeholder: 'Размер xl'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
deps
Специализированные поля блока
Поле 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" name="Statistics"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Statistics'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" name="Statistics" value="Привет!"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Statistics',
val: 'Привет!'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Введите имя"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" maxlength="20" placeholder="Введите имя"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя',
maxLength: 20
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Введите имя"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя',
autocomplete: false
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="Unique_1" placeholder="Введите имя"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя',
id: 'Unique_1'
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="3" placeholder="Введите имя"></span></span>
HTML{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Введите имя',
tabIndex: 3
}
BEMJSON[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps