placeholder в Chronoforms средствами Javascript (jQuery)
Создавая сайты на Joomla 2.5, часто сталкиваемся с необходимостью добавления разнообразных форм. В Joomla 1.5 я использовал CForms, но для свежей версии CMS компонент не подходит. На смену пришел Chronoforms — на мой взгляд самый удобный конструктор форм.
Однако, в нем невозможно стандартными способами поставить атрибут placeholder. Поиск в интернете вывел на платное дополнение, решающее эту задачу, поэтому решил попробовать исправить этот недочет самостоятельно средствами JavaScript.
Суть очень простая, мы задаем полям title, затем просто подставляем это значение в placeholder. Я использовал jQuery и конечный код получился таким:
1 2 3 4 5 6 7 8 9 10 | var j = jQuery.noConflict(); j(function() { j('form.Chronoform input[type=text]').each(function(k, v) {replaceTitle(j(v))}) j('form.Chronoform textarea').each(function(k, v) {replaceTitle(j(v))}) }) function replaceTitle(el) { el.prop('placeholder', el.prop('title')); } |
Данный код вставляем в шаблон в область <head>, где подключаются все скрипты, либо в отдельно вынесенный js файл, что более корректней. Не забываем предварительно подключить jQuery.
Пример (файл templates/{имя шаблона}/index.php):
1 2 3 4 5 6 7 | <head> <jdoc:include type="head" /> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <style type="text/css">.gradient {filter: none;}</style><![endif]--> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script> </head> |
Тут специально вырезан лишний html + php код, чтобы вы смогли сориентироваться, куда вставлять нужный код. Нас интересуют строки
1 2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script> |
Где мы подключаем jquery библиотеку и файл template.js. Как можно увидеть — не надо прописывать название вашего шаблона в путях, т.к. оно берется из файла конфигурации. Соответственно, создаем файл templates/{имя шаблона}/js/template.js, куда размещаем весь необходимый код js, указанный выше.
Мы находим в формах все текстовые поля и подставляем значение title в placeholder в цикле.
Однако, если вы используете js валидацию в chronoforms, то поле title используется в тексте ошибки. Если этот функционал не используете, то его можно просто отключить в настройках, поправив значение на Default:
