Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 29
А с чего вы взяли, что это является проблемой?
Ну мне, если честно, без разницы.
Не нравится начальству, и людям, которые заказывают сайты у компании.
Да и тут написано что должно исчезать. (хоть и не спецификация, но все же)
И пока искал готовое решение, находил много вопросов по этому поводу.
Не нравится начальству, и людям, которые заказывают сайты у компании.
Да и тут написано что должно исчезать. (хоть и не спецификация, но все же)
И пока искал готовое решение, находил много вопросов по этому поводу.
Решение Хрома и Сафари с неисчезающей надписью очевидно лучше, так как назначение поля понятно даже когда фокус установлен на нем. Я надеюсь, другие браузеры сделают в будущем так же. Что касается работы плагина. Есть поле «Поиск» и кнопка «Найти». При нажатии кнопки без заполнения поля что произойдет — поиск по слову «Поиск»? То есть необходимо при отправке формы проверять текст полей на неравенство плейсхолдерам?
В старых браузерах перед сабмитом все затрется, если пользователь ничего не вводил.
В новых думаю и так понятно.
В новых думаю и так понятно.
Как ваш кроссбраузерный плейсхолдер работает с полями типа password?
Насколько он совмести с автозаполнением форм, не бывает ли глюков?
Вообще, на мой взгляд, использовать плейсхолдер, который заменяет собой value у элемента — не красивое решение.
Гораздо лучше ставить инпуту background:transparent и под него подкладывать какой нибудь div или span c текстом плейсхолдера.
К тому же, такое решение позволит реализовать в старых браузерах поведение аналогичное хрому — т.е. сохранение подсказки когда в поле стоит фокус и скрытие ее только когда человек начал что-то набирать
Насколько он совмести с автозаполнением форм, не бывает ли глюков?
Вообще, на мой взгляд, использовать плейсхолдер, который заменяет собой value у элемента — не красивое решение.
Гораздо лучше ставить инпуту background:transparent и под него подкладывать какой нибудь div или span c текстом плейсхолдера.
К тому же, такое решение позволит реализовать в старых браузерах поведение аналогичное хрому — т.е. сохранение подсказки когда в поле стоит фокус и скрытие ее только когда человек начал что-то набирать
а если у меня форма шлется с помощью ajax?
Прошу прощения, запутался. Сделал тестовую страничку, смотрю FF15, MacOS 10.7.4.
Без подключения вашего скрипта плейсхолдер виден серым, по щелчку в поле он не исчезает и остается серым, пробуем набрать текст – исчезает, появляется набираемый текст.
С вашим скриптом все то же самое, но по щелчку в поле плейсхолдер становится черным, что совершенно сбивает с толку.
Скажите, так и задумано, другими словами, именно такой функционал требовался, или у меня глюк?
Без подключения вашего скрипта плейсхолдер виден серым, по щелчку в поле он не исчезает и остается серым, пробуем набрать текст – исчезает, появляется набираемый текст.
С вашим скриптом все то же самое, но по щелчку в поле плейсхолдер становится черным, что совершенно сбивает с толку.
Скажите, так и задумано, другими словами, именно такой функционал требовался, или у меня глюк?
Плохо, что только в .min
Ну ты бы что ли в названии темы вписал бы что это джуквери плагин, что бы я сюда хотя бы не заходил и не тратил время.
Из исходника:
Это значит, что не найдутся input[type=«email»], input[type=«tel»] и т.д.
("textarea, input[type='text']")
Это значит, что не найдутся input[type=«email»], input[type=«tel»] и т.д.
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills — тут есть секция с целой кучей полифилов плейсхолдеров. Мне нравится github.com/mathiasbynens/jquery-placeholder.
для хрома
А старье — дело относительное и индивидуальное под требования заказчика. Для него можно и обычный плагин в условные комментарии запихнуть
input:focus::-webkit-input-placeholder { color:transparent; }А старье — дело относительное и индивидуальное под требования заказчика. Для него можно и обычный плагин в условные комментарии запихнуть
Еще один пост который заставляет задуматься о качестве контента на харбе.
Во первых плагин на гитхабе без исходников — это как минимум свидетельствует о не компетентности автора.
Во творых я предмочитаю эмулировать плейсхолдер не изменением value а добавлением в dom нового элемента и последующим его позиционированием, что решает проблему когда у вас формчока полей на 20 и при этом дангные от туда собираются на js и шлются ajax, что будет делать ваш плагин? ничего! ибо события сабмит не произошло.
Во первых плагин на гитхабе без исходников — это как минимум свидетельствует о не компетентности автора.
Во творых я предмочитаю эмулировать плейсхолдер не изменением value а добавлением в dom нового элемента и последующим его позиционированием, что решает проблему когда у вас формчока полей на 20 и при этом дангные от туда собираются на js и шлются ajax, что будет делать ваш плагин? ничего! ибо события сабмит не произошло.
Не только эту проблему это решает,
— но и проблему автодополнения (очевидно что если в поле уже есть какое то значение-плейсхолдер то браузер туда ничего своего не впишет),
— проблему полей password, в которые плейсхолдер обычным способом не впишешь, а под них положить — 0 проблем,
— а также проблему идентификации поля когда в него поставили фокус — value тебе в такой ситуации полюбому надо удалять, а плейсхолдер под полем можно просто сделать посветлее (имитировать поведение хрома) и совсем его скрывать только когда пользователь начал ввод. Если так не делать то не всегда понятно, что собственно надо вводить в поле, когда в него уже поставлен фокус.
— но и проблему автодополнения (очевидно что если в поле уже есть какое то значение-плейсхолдер то браузер туда ничего своего не впишет),
— проблему полей password, в которые плейсхолдер обычным способом не впишешь, а под них положить — 0 проблем,
— а также проблему идентификации поля когда в него поставили фокус — value тебе в такой ситуации полюбому надо удалять, а плейсхолдер под полем можно просто сделать посветлее (имитировать поведение хрома) и совсем его скрывать только когда пользователь начал ввод. Если так не делать то не всегда понятно, что собственно надо вводить в поле, когда в него уже поставлен фокус.
погодите, а чем ява скрипт не угодил? зачем этот костыль?
Простите а вы сейчас о чем?
Дополню, обычно когда функциональность реализована нативно в браузере очень хорошо её исполдьзовать, это как минимум лишает вас ряда проблем и позволяет избавиться от лищнего js.
— вот это ваш инпут, чтобы изменить поведения плейсхолдера в хроме вам надо всего лишь добавить правило в css, причем правило стандартное, никакого костыля, разве что я бы его написла так:
тогда оно будет работеть и на input и на textarea jsfiddle.net/g77nH/
По вашему же лучше на js удалить атрибут placeholder и написать стандартную функциональность на js — браво, вы выбрали клевое решение!
— вот это ваш инпут, чтобы изменить поведения плейсхолдера в хроме вам надо всего лишь добавить правило в css, причем правило стандартное, никакого костыля, разве что я бы его написла так:
[placeholder]:focus::-webkit-input-placeholder { color:transparent; }
тогда оно будет работеть и на input и на textarea jsfiddle.net/g77nH/
По вашему же лучше на js удалить атрибут placeholder и написать стандартную функциональность на js — браво, вы выбрали клевое решение!
В ff ::-moz-placeholder. О чем это говорит? О, это очень даже костыль, рабочий, но костыль :)
Это говорит лиш о вашей некомпетентности, больше ни о чем. Это не постыль это псевдоэлемент, идем читать спецификацию.
Не знаем что такое префиксы, для чего они нужны, считаем их костылями — идем в гугл читать что такое префиксы!
Не знаем что такое префиксы, для чего они нужны, считаем их костылями — идем в гугл читать что такое префиксы!
Договорились. А вы попробуйте поискать этот псевдоэлемент в спеке. И напомню вам про проприетарные фичи, выдаваемые за css3.
По-хорошему, когда используются такие решения, их нужно заносить в проверочный список и каждый раз, с выходом новой версии браузера, проверять поддержку.
По-хорошему, когда используются такие решения, их нужно заносить в проверочный список и каждый раз, с выходом новой версии браузера, проверять поддержку.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Кроссбраузерный placeholder + fix для Chrome