партнер компании 1с-битрикс
сайт фрилансера Сергея Эстрина
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
Простой адаптивный форум - модуль для битрикс
Мне пришлось перепробовать несколько решений для создания подсказок в полях ввода. К сожалению, ни одно из них не работало до конца, во всех браузерах и т.п., либо появлялись какие-то проблемы, например, задержка при вводе текста в IE 8. Поэтому я решил сделать свой плагин jQuery, имитирующий работу атрибута placeholder, который пока поддерживают только браузеры webkit (Safari, Chrome).

Скачать можно здесь.

Помимо задания подсказки напрямую через атрибут placeholder, можно использовать для этого любой тег с атрибутом "display: none", например, div. Для этого каждое поле должно располагаться внутри определенного тега, jquery селектор для которого (а также для тега с подсказкой) указывается в в параметрах вызывающей функции плагина. Это может быть полезно, если теги input, например, генерируются в CMS в готовом виде, и напрямую проставить атрибут placeholder нет возможности. Но по умолчанию (ради быстродействия) эта возможность выключена, включить ее можно с помощью тех же параметров вызывающей функции.

Пример:
<div class="form-field-container">

    <div class="form-field-caption" style="display: none">Input caption</div>

    <input type="text" name="name" value="" />

</div> 

$(":input[placeholder], textarea[placeholder]").placeholder({container: true});

Изначально плагин вызывается в конце файла скрипта с параметрами по умолчанию. Это можно изменить, но с учетом того, что для одного поля плагин должен вызываться только один раз.

Плагин работает с тегами input типа text и password, а также с тегами textarea.

Также в параметрах можно задать название CSS класса для поля в момент, когда подсказка включена, и дополнительные строки, которые подставляются в начало и конец подсказки.

Чтобы оставить сообщение, авторизуйтесь, или войдите с помощью:
Scriptosaur
04.12.2011 09:00:45
А зачем лишний див? Разве нельзя подсказку непосредственно самому методу из плагина скормить?
04.12.2011 18:05:57
Это как? С дивом - это дополнительный вариант, когда нельзя редактировать тег input, например, когда он в битриксе создан уже в компоненте фильтра или веб-форм. А основной - это атрибут "placeholder", который работает в webkit-браузерах без всяких скриптов.
Teresa
05.05.2012 17:29:10
Привет
Здорово, пригодиться в дальнейшем
Главная   ·   Модули для 1С-Битрикс   ·   Типовые услуги   ·   Форум   ·   Блог   ·   Контакты
Рейтинг@Mail.ru