• 956
  • 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', '[email protected]', '[email protected]' ],
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">

Можешь почитать и вот эту статейку "Редиректим на мобильную версию сайта"

mistakes

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

Ваше мнение

На каком движке ваш сайт?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element