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

Помимо задания подсказки напрямую через атрибут 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({containertrue});


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

Плагин работает с тегами 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
Привет
Здорово, пригодиться в дальнейшем