Superplaceholder - подсказки для полей заполнения
827материалов
228тем на форуме
3003комментария
6152пользователя

Superplaceholder - подсказки для полей заполнения


Описание:

При верстке форм очень часто приходится использовать замещающийся текст. Я думаю, что вы на многих сайтах это встречали, когда по умолчанию в поле ввода написан некий текст, но стоит кликнуть по данному полю, как текст автоматически исчезает и вы можете вводить туда, все что угодно. Хочу Вам представить не плохое решение-улучшение placeholder, то есть с помощью не большого скрипта superplaceholder.js при наведении на поле будут печататься те или иные подсказки. Данное решение можно применять для любых полей (input и textarea)

Установка:

Скачиваем архив с нашего сайта, распаковываем его и папку placeholder заливаем в Ваш файловый менеджер.

Потом в нижнюю часть сайта перед /body вставляем код:
Код
<script src="/placeholder/superplaceholder.js"></script>
<script>
superplaceholder({
el: inp1,
sentences: [ 'Здесь напишите Ваш E-mail адрес', 'Например: support@webmaster-ucoz.ru', 'Или: admin@webmaster-ucoz.ru' ],
options: {
loop: true
}
})
superplaceholder({
el: inp2,
sentences: [ 'Здесь напишите Ваше имя', 'Например: Роман', 'Или: Роман Николаевич' ],
options: {
loop: true
}
})
superplaceholder({
el: inp3,
sentences: [ 'Здесь оставить ссылку на Ваш сайт', 'Например: http://webmaster-ucoz.ru/', 'Или: http://www.ucoz.ru/' ],
options: {
loop: true
}
})
superplaceholder({
el: inp4,
sentences: [ 'Блалалалал', 'Траляляляляляля', 'Гугугугугугугу' ],
options: {
loop: true
}
})
</script>

Подробности:

Для примера мы возьмем поля для заполнения из демонстрации скрипта, вот собственно и сам код:
Код
<input id="inp1" type="text" placeholder="Ваш E-mail адрес">
<input id="inp2" type="text" placeholder="Как Вас зовут">
<input id="inp3" type="text" placeholder="Ссылка на Ваш сайт">
<textarea id="inp4" placeholder="Оставьте ваш комментарий" autocomplete="off"></textarea>

Для каждого поля, обязательно должен использоваться код placeholder:
Код
placeholder="тут любая информация"

И id="inp1" или id="inp2" или id="inp3" - это уникальный класс для каждого поля.

Ну а теперь просто соберем код в месте:
Код
<input id="inp1" type="text" placeholder="Ваш E-mail адрес">
<input id="inp2" type="text" placeholder="Как Вас зовут">
<input id="inp3" type="text" placeholder="Ссылка на Ваш сайт">

<script src="/placeholder/superplaceholder.js"></script>
<script>
superplaceholder({
el: inp1,
sentences: [ 'Здесь напишите Ваш E-mail адрес', 'Например: support@webmaster-ucoz.ru', 'Или: admin@webmaster-ucoz.ru' ],
options: {
loop: true
}
})
superplaceholder({
el: inp2,
sentences: [ 'Здесь напишите Ваше имя', 'Например: Роман', 'Или: Роман Николаевич' ],
options: {
loop: true
}
})
superplaceholder({
el: inp3,
sentences: [ 'Здесь оставить ссылку на Ваш сайт', 'Например: http://webmaster-ucoz.ru/', 'Или: http://www.ucoz.ru/' ],
options: {
loop: true
}
})
</script>

Ну вот в принципе все. Если не поняли, то задавайте вопросы в комментариях.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 07.03.2016 в 14:30
Материал просмотрен: 826 раз
Категория материала: Скрипты для uCoz
К материалу оставлен: 1 комментарий

Пожаловаться
Сказать спасибо
Источник

1 комментарий


Albina-Danes
А что, полезная штука однако like
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта