Как сделать анамированный placeholder для сайта?

Как сделать анамированный placeholder для сайта?

Что такое Placeholdem?

Placeholdem - это легковесный JavaScript плагин, который оживляет каретку плейсхолдера.

Где на сайте можно применить Placeholdem?

Скрипт можно применить для всех полей сайта где вы используете атрибут placeholder. По сути это все input и textarea поля.

Как работает плагин Placeholdem?

При активации поля input или textarea в котором имеется примененный атрибут placeholder (который добавляет в поле заранее прописанный текст подсказку), данный текст постепенно удаляется при фокусировке, при расфокусировке текст снова возвращается.

Как подключить плагин Placeholdem на сайте?

Скачать плагин можете по ссылке - здесь. Далее у себя в шаблоне на вашем сайте установите перед закрывающим тегом </body> такой скрипт:

<script src="/js/placeholdem.min.js"></script>
<script>Placeholdem( document.querySelectorAll( '[placeholder]' ) );</script>

Примечание

Вместо /js/placeholdem.min.js пропишите ссылку на ваш файл который вы скачали по ссылке выше и загрузили на фтп вашего сайта. Вот так просто подключается данный плагин, никаких сложностей по сути не должно возникать. Пример работы можете увидеть у меня в блоге в форме поиска по сайту.

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек