Плейсхолдер

Хоть в HTML5 и есть атрибут placeholder, но он пока-что работает лишь в браузерах с движком webkit.

Посмотрев некоторые посты на хабре, я увидел, что кое-кто изобретал велосипед, а другой скрипт, который якобы и делает сей атрибут кроссбраузерным, в полях типа password показывает звёздочки.

Собственно и написал скромный код на jQuery, который это всё дело и поддерживает.

— Ты вообще о чём?
“Потрогать” можно тут. Обязательно стоит нажать кнопку отправки формы и посмотреть в адресную строку после на отсутствие плейсхолдерного текста.

— А как использовать?
Всё просто:

options = {
color: '#ccc', //цвет текста placeholder'а
className: 'placeholded', //класс для работы
handle_send: true, //операции с сабмитом.
handle_password: true //издевательство над password-полем
};
$("#myinput").blurfocus('Тест плейсхолдера', options);


— Я вижу "$". Нужен jQuery?
Да, конечно. Желательно самый свежий.

— Везде ли работает?
Я проверял в IE7,8; FF3.5; Opera 10.01. Chrome и Safari не требуются в этом скрипте, т.к. понимают атрибут placeholder. (В скрипте предусмотрено это)

— Ну а где скачать?
Здесь.

UPD: все опции (color, className, handle_send, handle_password) — опциональны! В примере лишь показаны их стандартные значения.

UPD2: Есть новая версия: ссылка. Отличается она тем, что нужно лишь вставить скрипт



и в CSS-таблицу занести описание класса placeholded

<style type="text/css">.placeholded {color: #цвет;}</style>

при этом добавив всем нужным полям атрибут placeholder с нужным текстом. Скрипт по событию DOMReady обойдёт все поля с атрибутом placeholder и применит меры для не-webkit-овских браузеров.
_________________________
Скрипт не мой. Выложен он здесь по-просьбе моего товарища, который пока-что еще не является Хабраюзером. Надеюсь, что кому-либо он пригодится.
+13
9 ноября 2009, 23:55
60
mas1k 10,1

комментарии (32)

+5
remal #
Зачем цвет текста задавать в JS? Вам CSS мало?

Если есть атрибут placeholder, то зачем указывать второй раз этот текст в скрипте?
–2
mas1k #
Хочу уточнить, что это цвет самого текста placeholder'а. Возможно, что кому-то лень будет прописывать что-то в CSS, если можно просто $(..).blurfocus('Яблоко', {color: 'gray'}); Это сделано просто для удобства, ведь зачастую ничего больше и не нужно. Если Вы желаете это дело через CSS оформлять, то в опциях укажите лишь пустую строку для цвета.

Не нужно вообще в html указывать атрибут placeholder. Скрипт сам его добавит.
+5
remal #
Стоп. Есть работающий атрибут. Пусть пока не поддерживаемые всеми браузерами. Логично будет использовать его, а для остальных браузеров написать JS. Я не прав?

Цвет надо задавать в СSS. В одном месте. Ваш скрипт должен лишь добавлять/убирать некий служебный класс, обозначающий, что текущее значение — placeholder.
А то в инете огромное кол-во холиваров на тему семантики, разделения данных и представления, а вы предлагаете разделить цветовое оформление между CSS и JS.
–4
mas1k #
Поймите, пожалуйста, что скрипт написан так, чтобы можно было просто задать поле и просто написать текст. Больше ни о чём не задумываться, нигде не прописывать атрибуты и не трогать CSS-стили. Остальные опции необязательны и вынесены просто для того, чтобы указать, что они вообще есть. Я уверен, что в большинстве случаев они вообще не будут использованы.

+3
remal #
Зачем так писать? Что мешает по событию DOMReady пройтись по всем элементам форм на странице и обработать атрибут placeholder? Работа со скриптом будет ограничиваться только одной строчкой подключения самого скрипта (<script src="">) и несколькими строчками в CSS.
0
mas1k #
Вы говорите правильно, но это будет верно не для всех случаев.
+ такая версия лучше?
0
remal #
А в каких случаях это будет неверно?

Вот этот вариант мне нравится куда больше! Спасибо.
0
mas1k #
Первое, что пришло в голову: когда разным полям нужно прописать разные опции.
0
remal #
Можно конкретнее?

Разные цвета — CSS
Отправлять ли на сервер значение placeholder'a — в этом случае это уже становится просто значением по-умолчанию

Что я упустил?
0
mas1k #
Вы упустили работу с полем password и замену класса placeholded.

Возможно, что сайтам, работающим с браузерами IE6 или, не дай Бог, ниже, понадобится отключение работы с полями type=«password».

А быть может, что нужно будет задать всем полям (а их, допустим, 25) плейсхолдер навроде «Это поле #%d», а текстом редактировать лень — помогает такая вещь:
$(".some_inputs").each(function(i){ $(this).blurfocus('Это поле #' + i); });
0
l2k #
вы у полей сами можете проверить type=«password»
0
Fesor #
Давно хотел это сделать но все никак не доходили руки) Завтра допилю этот скрипт. Согласен с предыдущим аратором — оформление должно быть в CSS
0
Coder #
Такой вариант пробовали? habrahabr.ru/blogs/javascript/74363/
0
mas1k #
Тот вариант имеет некоторые проблемы с полями type=«password».
0
alexey_uzhva #
Хотел уже было возмутиться на «странный» API, но увидел UPD2.

Вот это уже действительно хорошее решение! Спасибо:-)
–1
habraname #
тупой вопрос: для чего нужен этот атрибут?
–1
hannimed #
ИМХО, название PlaceHolder — не самое подходящее для атрибута. Для этой функциональности больше подходит название Watermark. Плэйсхолдер дословно переводится как «хранитель места», т.е. контейнер, который хранит какую-то область. В ASP.NET именно так и называется соответствующий контрол.
+2
mas1k #
А Вы переведите с английского placeholder не дословно, а как «заполнитель» и, я думаю, всё станет на свои места.
Google Translate
0
hannimed #
Да, не знал что есть перевод для слитного варианта. Спасибо.
0
shaggysmile #
Единственно незначительный минус — не проходит валидацию, так как свойство placeholder только у HTML 5
0
dshster #
При отключенном JS текст внутри инпута остаётся. А можно показать мой велосипед? Нечто похожее пытался сделать: jour.me/bricks/label-tips/
0
Koc #
после отправки формы зоть в адренсой строке ничего и нет, но автозаполнение полей срабатывает =(
0
mas1k #
Если Вы имейте в виду автозаполнение логина и пароля, то оно и должно срабатывать. Или, по-вашему, не должно?
0
Koc #

зачем запоминать плейсхолдер?
0
mas1k #
Вроде как исправил. Проверьте, пожалуйста.
–1
RiderSx #
А если на странице несколько форм? Что, во все подставятся плейсхолдеры?
0
crwin #
зачем-то форме присваивает класс «placeholded».
к тому же проверку сабмита, дабы не посылать текст плейсхолдера, можно попроще сделать: по сабмиту проверять равно ли валуе плейсхолдеру, зачем городить огород
0
mas1k #
Насчёт присваивания класса: да, теперь это выглядит негоже. Он нужен был для определения, что форма была уже обработана. Теперь эта информация хранится в данных ($.data()).

Насчёт огорода: обработка событий нужена для того, чтобы функции, которые так или иначе проверяют поле на правильность (ввода email, к примеру), также получали пустые значения вместо плесхолдерных.
0
stigger #
0
mas1k #
Этот плагин всё же не работает с полями type=«password» так, как об этом говорит спецификация атрибута placeholder в HTML5. К тому же, валидаторы форм с этим плагином будут получать в полях текст плейсхолдера, а не чего-то ещё.

0
mas1k #
C плагином Blair Mitchelmore
Моя версия

Плагин так же игнорирует наличие свободой работы атрибута placeholder у браузеров на основе webkit.
0
developer #
а почему не работает ничего?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.