4 563 Скрипты / Form

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: '|'
    }
});
Скачать 598Загрузок 107,89 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи