Страница 1 из 212»
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Применение в системном поле placeholder при помощи CSS и JS
Применение в системном поле placeholder при помощи CSS и JS
workman
Дата: Пятница, 12.02.2016, 22:03 | Сообщение # 1
Vip
Сообщений:1576
Награды: 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)


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Angerfist
Дата: Пятница, 12.02.2016, 22:19 | Сообщение # 2
Vip
Сообщений:616
Награды: 18


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

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


В первые вижу такую информацию, раньше в интернете искал, так не нашел не чего.

AnTron
Дата: Пятница, 12.02.2016, 22:53 | Сообщение # 4
Пользователи
Сообщений:33
Награды: 0


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


По названию вообще бы не догадался, пока бы не посмотрел, много где на сайте uCoz видел, стоит такая функция.
workman
Дата: Пятница, 12.02.2016, 23:15 | Сообщение # 6
Vip
Сообщений:1576
Награды: 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
Kosten
Дата: Пятница, 12.02.2016, 23:37 | Сообщение # 7
Администраторы
Сообщений:12668
Награды: 39


workman, брат ты реальный такой греф сделал, но нужные коды, это не обсуждается, от души.

Сафрон
Дата: Пятница, 12.02.2016, 23:48 | Сообщение # 8
Пользователи
Сообщений:159
Награды: 0


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


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

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


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


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


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


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

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


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
workman
Дата: Суббота, 13.02.2016, 00:48 | Сообщение # 14
Vip
Сообщений:1576
Награды: 7


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

Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
csretven
Дата: Суббота, 13.02.2016, 17:07 | Сообщение # 15
Пользователи
Сообщений:46
Награды: 0


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