@mas1k9 ноя 2009 в 20:55

Плейсхолдер

2 мин

8.6K

jQuery *

+14

Комментарии 34

@remal 9 ноя 2009 в 20:59

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

Если есть атрибут placeholder, то зачем указывать второй раз этот текст в скрипте?

@mas1k 9 ноя 2009 в 21:06

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

Не нужно вообще в html указывать атрибут placeholder. Скрипт сам его добавит.

@remal 9 ноя 2009 в 21:21

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

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

@mas1k 9 ноя 2009 в 21:28

Поймите, пожалуйста, что скрипт написан так, чтобы можно было просто задать поле и просто написать текст. Больше ни о чём не задумываться, нигде не прописывать атрибуты и не трогать CSS-стили. Остальные опции необязательны и вынесены просто для того, чтобы указать, что они вообще есть. Я уверен, что в большинстве случаев они вообще не будут использованы.

@remal 9 ноя 2009 в 21:34

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

@mas1k 9 ноя 2009 в 21:50

Вы говорите правильно, но это будет верно не для всех случаев.
+ такая версия лучше?

@remal 9 ноя 2009 в 21:57

А в каких случаях это будет неверно?

Вот этот вариант мне нравится куда больше! Спасибо.

@mas1k 9 ноя 2009 в 22:17

Первое, что пришло в голову: когда разным полям нужно прописать разные опции.

@remal 9 ноя 2009 в 22:36

Можно конкретнее?

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

Что я упустил?

@mas1k 9 ноя 2009 в 22:45

Вы упустили работу с полем password и замену класса placeholded.

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

А быть может, что нужно будет задать всем полям (а их, допустим, 25) плейсхолдер навроде «Это поле #%d», а текстом редактировать лень — помогает такая вещь:
$(".some_inputs").each(function(i){ $(this).blurfocus('Это поле #' + i); });

@l2k 10 ноя 2009 в 11:14

вы у полей сами можете проверить type=«password»

@Fesor 9 ноя 2009 в 21:05

Давно хотел это сделать но все никак не доходили руки) Завтра допилю этот скрипт. Согласен с предыдущим аратором — оформление должно быть в CSS

@Coder 9 ноя 2009 в 21:07

Такой вариант пробовали? habrahabr.ru/blogs/javascript/74363/

@mas1k 9 ноя 2009 в 21:10

Тот вариант имеет некоторые проблемы с полями type=«password».

@alexey_uzhva 10 ноя 2009 в 04:37

Хотел уже было возмутиться на «странный» API, но увидел UPD2.

Вот это уже действительно хорошее решение! Спасибо:-)

@habraname 10 ноя 2009 в 05:15

тупой вопрос: для чего нужен этот атрибут?

@hannimed 10 ноя 2009 в 07:08

ИМХО, название PlaceHolder — не самое подходящее для атрибута. Для этой функциональности больше подходит название Watermark. Плэйсхолдер дословно переводится как «хранитель места», т.е. контейнер, который хранит какую-то область. В ASP.NET именно так и называется соответствующий контрол.

@mas1k 10 ноя 2009 в 12:08

А Вы переведите с английского placeholder не дословно, а как «заполнитель» и, я думаю, всё станет на свои места.
Google Translate

@hannimed 10 ноя 2009 в 12:11

Да, не знал что есть перевод для слитного варианта. Спасибо.

@shaggysmile 10 ноя 2009 в 07:09

Единственно незначительный минус — не проходит валидацию, так как свойство placeholder только у HTML 5

@dshster 10 ноя 2009 в 08:24

При отключенном JS текст внутри инпута остаётся. А можно показать мой велосипед? Нечто похожее пытался сделать: jour.me/bricks/label-tips/

@Koc 10 ноя 2009 в 08:28

после отправки формы зоть в адренсой строке ничего и нет, но автозаполнение полей срабатывает =(

@mas1k 10 ноя 2009 в 12:03

Если Вы имейте в виду автозаполнение логина и пароля, то оно и должно срабатывать. Или, по-вашему, не должно?

@Koc 10 ноя 2009 в 12:19

зачем запоминать плейсхолдер?

@mas1k 10 ноя 2009 в 12:55

Вроде как исправил. Проверьте, пожалуйста.

@RiderSx 10 ноя 2009 в 09:51

А если на странице несколько форм? Что, во все подставятся плейсхолдеры?

@crwin 10 ноя 2009 в 11:00

зачем-то форме присваивает класс «placeholded».
к тому же проверку сабмита, дабы не посылать текст плейсхолдера, можно попроще сделать: по сабмиту проверять равно ли валуе плейсхолдеру, зачем городить огород

@mas1k 10 ноя 2009 в 12:01

Насчёт присваивания класса: да, теперь это выглядит негоже. Он нужен был для определения, что форма была уже обработана. Теперь эта информация хранится в данных ($.data()).

Насчёт огорода: обработка событий нужена для того, чтобы функции, которые так или иначе проверяют поле на правильность (ввода email, к примеру), также получали пустые значения вместо плесхолдерных.

@stigger 10 ноя 2009 в 12:04

велосипед.

plugins.jquery.com/project/placeholder

@mas1k 10 ноя 2009 в 12:22

Этот плагин всё же не работает с полями type=«password» так, как об этом говорит спецификация атрибута placeholder в HTML5. К тому же, валидаторы форм с этим плагином будут получать в полях текст плейсхолдера, а не чего-то ещё.