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="Введите имя"></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="Введите пароль" 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="Введите запрос" 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="Введите имя"></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="Привет!"><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"></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="Введите запрос" 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.

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

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"></span></span>

{
    block: 'input',
    mods: {
        theme: 'islands',
        size: 's'
    },
    placeholder: 'Размер s'
}

[
    {
        block: 'input',
        mods: {
            theme: 'islands',
            size: 's'
        }
    }
]

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"></span></span>

{
    block: 'input',
    mods: {
        theme: 'islands',
        size: 'm'
    },
    placeholder: 'Размер m'
}

[
    {
        block: 'input',
        mods: {
            theme: 'islands',
            size: 'm'
        }
    }
]

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"></span></span>

{
    block: 'input',
    mods: {
        theme: 'islands',
        size: 'l'
    },
    placeholder: 'Размер l'
}

[
    {
        block: 'input',
        mods: {
            theme: 'islands',
            size: 'l'
        }
    }
]

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"></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"></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="Привет!"></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="Введите имя"></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="Введите имя"></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"></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="Введите имя"></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="Введите имя"></span></span>

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

[
    {
        block: 'input',
        mods: {
            theme: 'islands',
            size: 'm'
        }
    }
]

input

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

Методология

Технологии

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

Библиотеки

Учебные материалы

input

Обзор блока

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

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

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

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

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

Поле для ввода пароля (модификатор `type` в значении `password`)

Поле для поиска (модификатор `type` в значении `search`)

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

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

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

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

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

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

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

Поле `name`

Поле `val`

Поле `placeholder`

Поле `maxLength`

Поле `autocomplete`

Поле `id`

Поле `tabIndex`

Block input

Instance methods:

Отправить отзыв

Методология

Технологии

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

Библиотеки

Учебные материалы

input

Обзор блока

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поле name

Поле val

Поле placeholder

Поле maxLength

Поле autocomplete

Поле id

Поле tabIndex

Block input

Instance methods:

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

Поле для ввода пароля (модификатор `type` в значении `password`)

Поле для поиска (модификатор `type` в значении `search`)

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

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

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

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

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

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

Поле `name`

Поле `val`

Поле `placeholder`

Поле `maxLength`

Поле `autocomplete`

Поле `id`

Поле `tabIndex`