• 795
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Набрел я на один интересный плагинчик Superplaceholder.js - библиотека, которая показывает юзеру дополнительную информацию по заполнению форм за счет циклической смены подсказки placeholder в поле. Весит не много ,около 2 мб. Работает во всех последних версиях браузеров. Ну демку вы уже посмотрели.

Итак приступим
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем, и заливаем файл Superplaceholder.js в папку с вашим шаблоном ну и там можно его поместить в папку с вашими скриптами,у меня это папка JS.
2.Подключаем там где будем использовать наш скрипт

Код:
<script src="{{ tpl_url }}/js/superplaceholder.js"></script>
У меня получилось вот так.
3.Ну и сам скрипт где задаются все настройки
Код:
	<script>
superplaceholder({
el: inp1,
sentences: [ 'Введите ваш Email', 'vash@gmail.com', 'kuzy@google.com' ],
options: {
loop: true
}
})

superplaceholder({
el: inp2,
sentences: [ '1 спец. символ', '1 символ в верхнем регистре', 'Например, GhjY*54DsH' ],
options: {
loop: true,
letterDelay: 30
}
})

superplaceholder({
el: inp3,
sentences: [ 'Поддерживает любой формат', 'http://google.com', 'www.facebook.com', 'atman.biz' ],
options: {
letterDelay: 80,
loop: true,
startOnFocus: false
}
})
</script>
Это пример из демки
Сейчас немного разберемся что к чему
Вот сам синтаксис нашего скрипта:
Код:
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: '|'
}
});
Вот и все ,пользуемся
Ах да забыл,смотрите чтобы в формах было наличие placeholder, вот так примерно
Код:
<input  type="text" value="" placeholder="Email">

Можешь почитать и вот эту статейку "Получил сертификат SSL. Как настроить редирект с http на https"

mistakes

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

----