Страница 1 из 212»
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Применение в системном поле placeholder при помощи CSS и JS
Применение в системном поле placeholder при помощи CSS и JS
workman
Дата: Пятница, 12.02.2016, 22:03 | Сообщение # 1
Гл. Модератор
Сообщений:1610
Награды: 7


Иногда нам хочется чтобы на страницах добавления (например - Статей), чтобы каждому не объяснять что и куда ставим подсказки в виде 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(30Kb)


Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)
Страна: (RU)
Angerfist
Дата: Пятница, 12.02.2016, 22:19 | Сообщение # 2
Vip
Сообщений:761
Награды: 21


молодчик,нужная вещь пригодится

No regrets
Страна: (RU)
Kosten
Дата: Пятница, 12.02.2016, 22:30 | Сообщение # 3
Администраторы
Сообщений:15290
Награды: 50


В первые вижу такую информацию, раньше в интернете искал, так не нашел не чего.
Страна: (RU)
AnTron
Дата: Пятница, 12.02.2016, 22:53 | Сообщение # 4
Пользователи
Сообщений:34
Награды: 0


То что нужно. отлично, всегда хорошие коды заливаете.
Страна: (RU)
tsakonter
Дата: Пятница, 12.02.2016, 22:59 | Сообщение # 5
Пользователи
Сообщений:217
Награды: 0


По названию вообще бы не догадался, пока бы не посмотрел, много где на сайте uCoz видел, стоит такая функция.
Страна: (RU)
workman
Дата: Пятница, 12.02.2016, 23:15 | Сообщение # 6
Гл. Модератор
Сообщений:1610
Награды: 7


Но если вам понравилось решение то вместо тех стилей можно поставить эти и при клике по полю, подсказка будет фокусировать вправо

Код

::-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.02.2016, 23:21
Страна: (RU)
Kosten
Дата: Пятница, 12.02.2016, 23:37 | Сообщение # 7
Администраторы
Сообщений:15290
Награды: 50


workman, брат ты реальный такой греф сделал, но нужные коды, это не обсуждается, от души.
Страна: (RU)
Сафрон
Дата: Пятница, 12.02.2016, 23:48 | Сообщение # 8
Vip
Сообщений:224
Награды: 1


Есть такие, которым нужно носом тыкать, так не поймут, то что писать, для таких скрипт не то что нужен, он обязан стоять, если на сайт постоянный клиент не сильно понятлив.
Страна: (RU)
Maryges
Дата: Пятница, 12.02.2016, 23:53 | Сообщение # 9
Пользователи
Сообщений:142
Награды: 0


Цитата workman ()
Но если вам понравилось решение то вместо тех стилей можно поставить эти и при клике по полю, подсказка будет фокусировать вправо

Думаю того кода хватит, нужно описать как что ставить, или все догадаются. Но если с первым разберетесь, второй поставите быстро.
Страна: (RU)
ucozmental
Дата: Суббота, 13.02.2016, 00:02 | Сообщение # 10
Пользователи
Сообщений:111
Награды: 0


Так понял для чего, а как ставить вообще не понятно.
Страна: (RU)
Maryges
Дата: Суббота, 13.02.2016, 00:05 | Сообщение # 11
Пользователи
Сообщений:142
Награды: 0


Первый, ucozmental, но что не понятного, все написал workman подробно здесь, это же скрипты и не чего не нужно убирать, а только добавить.
Страна: (RU)
ucozmental
Дата: Суббота, 13.02.2016, 00:07 | Сообщение # 12
Пользователи
Сообщений:111
Награды: 0


Все расмотрел, просто стили, которые заключенные, с толку сбили, их просто ниже ставить нужно.
Страна: (RU)
workman
Дата: Суббота, 13.02.2016, 00:42 | Сообщение # 13
Гл. Модератор
Сообщений:1610
Награды: 7


Цитата Kosten ()
брат ты реальный такой греф сделал, но нужные коды, это не обсуждается, от души

Спасибо братишка!!! Тут в принципе ничего я сверхестественного не выложил ... главное по размышлять и потом просто поделиться с другими


Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)
Страна: (RU)
workman
Дата: Суббота, 13.02.2016, 00:48 | Сообщение # 14
Гл. Модератор
Сообщений:1610
Награды: 7


ucozmental, [info]Еще раз повторюсь. Кому что не понятно, то спрашивайте без с тиснения.[/info]

Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)
Страна: (RU)
csretven
Дата: Суббота, 13.02.2016, 17:07 | Сообщение # 15
Пользователи
Сообщений:54
Награды: 0


workman, заметил, что оригинальные скрипты на сайт выкладываете, спасибо за этот. Если есть еще что то новое, то думаю тут многие рады что то уникальное увидеть и установить.
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Применение в системном поле placeholder при помощи CSS и JS
Страница 1 из 212»
Поиск: