Superplaceholder — другой взгляд на placeholder
Superplaceholder.js - библиотека, которая покажет пользователю дополнительную информацию по заполнению полей форм за счет циклической смены подсказки placeholder в поле. Весит около 2кб.
Хорошо работает на последних версиях браузеров. Для не поддерживаемых браузеров будет, так называема, graceful degradation.
JS
Синтаксис:
superplaceholder({
el: <таргет на input>,
sentences: <массив с текстовыми данными>,
options: {} // кастомизируемые параметры, опционально
});
Базовое применения:
superplaceholder({
el: document.querySelector('input'),
sentences: [ 'Пример отображения 1', 'Пример отображения 2']
});
Опции
superplaceholder({
el: document.querySelector('input'),
sentences: [ 'Пример отображения 1', 'Пример отображения 2'],
options: {
// Задержка между буквами (в миллисекундах)
letterDelay: 100, // миллисекунды
// Задержка между предложениями (в миллисекундах)
sentenceDelay: 1000,
// Начало на состояние :focus. Установите false для автостарта
startonfocus: true,
// Зациклить предложения
loop: false,
// Перемешивать показанные предложения
shuffle: false,
// Показывать курсор или нет. Показывать по умолчанию
showCursor: true,
// Вид курсора
cursor: '|'
}
});
Установка
npm install superplaceholder --save
yarn add superplaceholder
bower install superplaceholder --save