• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 2
  • 1
  • 2
  • »
Форум » Веб-разработка » HTML + CSS — коды » Применение в системном поле placeholder при помощи CSS и JS
Применение в системном поле placeholder при помощи CSS и JS
workman
 		Пятница, 12 Февраля 2016, 22:03 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Иногда нам хочется чтобы на страницах добавления (например - Статей), чтобы каждому не объяснять что и куда ставим подсказки в виде 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>
Прикрепления: 6486396.png (30.5 Kb)
Страна: (RU)
Angerfist
 		Пятница, 12 Февраля 2016, 22:19 | Сообщение 2
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
 молодчик,нужная вещь пригодится
No regrets
Страна: (RU)
Kosten
 		Пятница, 12 Февраля 2016, 22:30 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
В первые вижу такую информацию, раньше в интернете искал, так не нашел не чего.
Страна: (RU)
AnTron
 		Пятница, 12 Февраля 2016, 22:53 | Сообщение 4
Оффлайн
Пользователи
Сообщений:38
Награды: 0
« 7 »
То что нужно. отлично, всегда хорошие коды заливаете.
Страна: (RU)
tsakonter
 		Пятница, 12 Февраля 2016, 22:59 | Сообщение 5
Оффлайн
Пользователи
Сообщений:220
Награды: 0
« 8 »
По названию вообще бы не догадался, пока бы не посмотрел, много где на сайте uCoz видел, стоит такая функция.
Страна: (RU)
workman
 		Пятница, 12 Февраля 2016, 23:15 | Сообщение 6
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Но если вам понравилось решение то вместо тех стилей можно поставить эти и при клике по полю, подсказка будет фокусировать вправо

Код

::-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;}

Если кому не понятно то пишите письма. Будем разбираться вместе :)

Ну а кому вдруг приспичит подкрасить подсказку то вот таким образом мы ее можем превратить в любой цвет
Естественно цветастость меняем под себя biggrin
Код
::-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
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
workman, брат ты реальный такой греф сделал, но нужные коды, это не обсуждается, от души.
Страна: (RU)
Сафрон
 		Пятница, 12 Февраля 2016, 23:48 | Сообщение 8
Оффлайн
Vip
Сообщений:224
Награды: 1
« 6 »
Есть такие, которым нужно носом тыкать, так не поймут, то что писать, для таких скрипт не то что нужен, он обязан стоять, если на сайт постоянный клиент не сильно понятлив.
Страна: (RU)
Maryges
 		Пятница, 12 Февраля 2016, 23:53 | Сообщение 9
Оффлайн
Пользователи
Сообщений:142
Награды: 0
« 5 »
Цитата workman ()
Но если вам понравилось решение то вместо тех стилей можно поставить эти и при клике по полю, подсказка будет фокусировать вправо

Думаю того кода хватит, нужно описать как что ставить, или все догадаются. Но если с первым разберетесь, второй поставите быстро.
Страна: (RU)
ucozmental
 		Суббота, 13 Февраля 2016, 00:02 | Сообщение 10
Оффлайн
Пользователи
Сообщений:112
Награды: 0
« 0 »
Так понял для чего, а как ставить вообще не понятно.
Страна: (RU)
Maryges
 		Суббота, 13 Февраля 2016, 00:05 | Сообщение 11
Оффлайн
Пользователи
Сообщений:142
Награды: 0
« 5 »
Первый, ucozmental, но что не понятного, все написал workman подробно здесь, это же скрипты и не чего не нужно убирать, а только добавить.
Страна: (RU)
ucozmental
 		Суббота, 13 Февраля 2016, 00:07 | Сообщение 12
Оффлайн
Пользователи
Сообщений:112
Награды: 0
« 0 »
Все расмотрел, просто стили, которые заключенные, с толку сбили, их просто ниже ставить нужно.
Страна: (RU)
workman
 		Суббота, 13 Февраля 2016, 00:42 | Сообщение 13
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Цитата Kosten ()
брат ты реальный такой греф сделал, но нужные коды, это не обсуждается, от души

Спасибо братишка!!! Тут в принципе ничего я сверхестественного не выложил ... главное по размышлять и потом просто поделиться с другими
Страна: (RU)
workman
 		Суббота, 13 Февраля 2016, 00:48 | Сообщение 14
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
ucozmental, [info]Еще раз повторюсь. Кому что не понятно, то спрашивайте без с тиснения.[/info]
Страна: (RU)
csretven
 		Суббота, 13 Февраля 2016, 17:07 | Сообщение 15
Оффлайн
Пользователи
Сообщений:54
Награды: 0
« 0 »
workman, заметил, что оригинальные скрипты на сайт выкладываете, спасибо за этот. Если есть еще что то новое, то думаю тут многие рады что то уникальное увидеть и установить.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Применение в системном поле placeholder при помощи CSS и JS
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: