Интерактивный placeholder

Атрибут placeholder отвечает за подсказку в поле ввода. Выглядит он как полупрозрачный текст, который пропадает как только начинаешь что-то вводить.

В вёрстке это выглядит следующим образом:

<input type="text" name="login" placeholder="Ваш логин">

В сегодняшнем уроке мы рассмотрим скрипт SuperPlaceholder
Скачать его можно на GitHub
jQuery для работы скрипта не требуется!
Скачивайте весь архив с гитхаба, распаковывайте и подключайте на странице файл superplaceholder.js

<script src="./superplaceholder.js"></script>

Затем вставляете традиционные поля ввода:

<input type="text" id="login" placeholder="Введите логин">
<input type="text" id="site" placeholder="Введите адрес сайта">

Теперь натравливаем на них superplaceholder:

<script>
superplaceholder({
    el: login,
    sentences: ['tristamoff', 'marina', 'vox-populi-gp']
})
</script>

В ключе el передаём id инпута, в sentences - слова, которые будут подставляться в поле ввода.
Теперь, когда вы кликните по полю ввода - слова из sentences будут набираться.

Третьим аргументом(options) можно передать настройки:

superplaceholder({
    el: site,
    sentences: ['golos.io', 'https://golos.io', 'goldvoice.club', 'vp-golos.ml'],
    options: {
        // задержка между печатанием букв (в миллисекундах)
        letterDelay: 150, // миллисекунды
        // задержка между печатанием слов (в миллисекундах)
        sentenceDelay: 2000,
        // стартует только при клике на поле ввода
        startOnFocus: true,
        // зациклить sentences
        loop: false,
        // показывать sentences вперемежку
        shuffle: false,
        // показывать курсор
        showCursor: true,
        // строка для отрисовки курсора
        cursor: '|'
    }
})

Пример:

Рабочий пример можно посмотреть тут