mas1k 9 ноя 2009 в 23:55

Плейсхолдер

2 мин

8.4K

jQuery*

+13

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

remal 9 ноя 2009 в 23:59

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

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

mas1k 10 ноя 2009 в 00:06

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

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

-2

remal 10 ноя 2009 в 00:21

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

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

mas1k 10 ноя 2009 в 00:28

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

-4

remal 10 ноя 2009 в 00:34

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

mas1k 10 ноя 2009 в 00:50

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

remal 10 ноя 2009 в 00:57

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

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

mas1k 10 ноя 2009 в 01:17

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

remal 10 ноя 2009 в 01:36

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

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

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

mas1k 10 ноя 2009 в 01:45

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

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

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

l2k 10 ноя 2009 в 14:14

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

Fesor 10 ноя 2009 в 00:05

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

Coder 10 ноя 2009 в 00:07

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

mas1k 10 ноя 2009 в 00:10

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

alexey_uzhva 10 ноя 2009 в 07:37

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

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

habraname 10 ноя 2009 в 08:15

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

-1

hannimed 10 ноя 2009 в 10:08

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

-1

mas1k 10 ноя 2009 в 15:08

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

hannimed 10 ноя 2009 в 15:11

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

shaggysmile 10 ноя 2009 в 10:09

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

dshster 10 ноя 2009 в 11:24

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

Koc 10 ноя 2009 в 11:28

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

mas1k 10 ноя 2009 в 15:03

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

Koc 10 ноя 2009 в 15:19

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

mas1k 10 ноя 2009 в 15:55

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

RiderSx 10 ноя 2009 в 12:51

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

-1

crwin 10 ноя 2009 в 14:00

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

mas1k 10 ноя 2009 в 15:01

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

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

stigger 10 ноя 2009 в 15:04

велосипед.

plugins.jquery.com/project/placeholder

mas1k 10 ноя 2009 в 15:22

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