|
Применение в системном поле placeholder при помощи CSS и JS
|
|
| workman | Пятница, 12 Февраля 2016, 22:03 | Сообщение 1 |
| Иногда нам хочется чтобы на страницах добавления (например - Статей), чтобы каждому не объяснять что и куда ставим подсказки в виде placeholder. Даю пример со своей доски объявлений. Под каждый модуль нужно редактировать под себя естественно.
Как это работает Вы можете посмотреть странице добавления материалов
Ну и так как установить?
А все очень просто. В том модуле где стоит системное заполнение формы ставим на странице добавления материала перед /body данный скрипт (не забываем редактировать id под свои поля)
Код <script>
$('#bdF1').attr('placeholder', 'укажите заголовок объявления');
$('#bdF13').attr('placeholder', 'только цифры. Например: 1 000');
$('#bdF9').attr('placeholder', 'например: +7 (999) 999-99-99');
$('#bdF15').attr('placeholder', 'услуга, сдача, аренда, ремонт и т.д.');
$('#bdF6').attr('placeholder', 'укажите как к вам обращаться');
$('#bdF7').attr('placeholder', 'скрыт от спамеров');
$('#bdF14').attr('placeholder', 'город, район, село, поселок ...');
</script>
Ну а это естественно ставим с ниже
Если же Вы желаете чтобы работало на всем сайте где имеется placeholder,то ставим в стили СSS
Код <style>
::-webkit-input-placeholder {line-height: 15px; transition: line-height 0.5s ease;}
::-moz-placeholder {line-height: 15px; transition: line-height 0.5s ease;}
:-moz-placeholder {line-height: 15px; transition: line-height 0.5s ease;}
:-ms-input-placeholder {line-height: 15px; transition: line-height 0.5s ease;}
:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
</style> | | [ RU ] |
| |
| Angerfist | Пятница, 12 Февраля 2016, 22:19 | Сообщение 2 |
|  молодчик,нужная вещь пригодится
No regrets
| | [ RU ] |
| |
| Kosten | Пятница, 12 Февраля 2016, 22:30 | Сообщение 3 |
| В первые вижу такую информацию, раньше в интернете искал, так не нашел не чего.
| | [ RU ] |
| |
| AnTron | Пятница, 12 Февраля 2016, 22:53 | Сообщение 4 |
| То что нужно. отлично, всегда хорошие коды заливаете.
| | [ RU ] |
| |
| tsakonter | Пятница, 12 Февраля 2016, 22:59 | Сообщение 5 |
| По названию вообще бы не догадался, пока бы не посмотрел, много где на сайте uCoz видел, стоит такая функция.
| | [ RU ] |
| |
| workman | Пятница, 12 Февраля 2016, 23:15 | Сообщение 6 |
|
| Но если вам понравилось решение то вместо тех стилей можно поставить эти и при клике по полю, подсказка будет фокусировать вправо
Код
::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
А вот при этом подсказка своего рода будет скрываться плавно
Код
::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
Если кому не понятно то пишите письма. Будем разбираться вместе :)
Ну а кому вдруг приспичит подкрасить подсказку то вот таким образом мы ее можем превратить в любой цвет
Естественно цветастость меняем под себя 
Код ::-webkit-input-placeholder {color:#c0392b;}
::-moz-placeholder {color:#c0392b;}
:-moz-placeholder {color:#c0392b;}
:-ms-input-placeholder {color:#c0392b;}
Сообщение отредактировал
workman - Пятница, 12 Февраля 2016, 23:21 | | [ RU ] |
| |
| Kosten | Пятница, 12 Февраля 2016, 23:37 | Сообщение 7 |
|
| workman, брат ты реальный такой греф сделал, но нужные коды, это не обсуждается, от души.
| | [ RU ] |
| |
| Сафрон | Пятница, 12 Февраля 2016, 23:48 | Сообщение 8 |
| Есть такие, которым нужно носом тыкать, так не поймут, то что писать, для таких скрипт не то что нужен, он обязан стоять, если на сайт постоянный клиент не сильно понятлив.
| | [ RU ] |
| |
| Maryges | Пятница, 12 Февраля 2016, 23:53 | Сообщение 9 |
| Цитата workman (  ) Но если вам понравилось решение то вместо тех стилей можно поставить эти и при клике по полю, подсказка будет фокусировать вправо
Думаю того кода хватит, нужно описать как что ставить, или все догадаются. Но если с первым разберетесь, второй поставите быстро.
| | [ RU ] |
| |
| ucozmental | Суббота, 13 Февраля 2016, 00:02 | Сообщение 10 |
| Так понял для чего, а как ставить вообще не понятно.
| | [ RU ] |
| |
| Maryges | Суббота, 13 Февраля 2016, 00:05 | Сообщение 11 |
|
| Первый, ucozmental, но что не понятного, все написал workman подробно здесь, это же скрипты и не чего не нужно убирать, а только добавить.
| | [ RU ] |
| |
| ucozmental | Суббота, 13 Февраля 2016, 00:07 | Сообщение 12 |
|
| Все расмотрел, просто стили, которые заключенные, с толку сбили, их просто ниже ставить нужно.
| | [ RU ] |
| |
| workman | Суббота, 13 Февраля 2016, 00:42 | Сообщение 13 |
|
| Цитата Kosten ( ) брат ты реальный такой греф сделал, но нужные коды, это не обсуждается, от души
Спасибо братишка!!! Тут в принципе ничего я сверхестественного не выложил ... главное по размышлять и потом просто поделиться с другими
| | [ RU ] |
| |
| workman | Суббота, 13 Февраля 2016, 00:48 | Сообщение 14 |
|
| ucozmental, [info]Еще раз повторюсь. Кому что не понятно, то спрашивайте без с тиснения.[/info]
| | [ RU ] |
| |
| csretven | Суббота, 13 Февраля 2016, 17:07 | Сообщение 15 |
| workman, заметил, что оригинальные скрипты на сайт выкладываете, спасибо за этот. Если есть еще что то новое, то думаю тут многие рады что то уникальное увидеть и установить.
| | [ RU ] |
| |
