Input attribute placeholder

[@k12th]

Конечно, только у input[type=«text»] бывают плейсхолдеры.
И, конечно, в любой верстке у всех инпутов цвет плейсхолдера всегда #ccc.

[@Roosso]

Другие браузеры сами ставят цвет на формы вообще не спрашивая пользователя.
Мы все таки чаще используем светлые фоны для сайта и темный текст для форм. Но мне так же кажется, что искушенному пользователю труда не составит поправить цвета.

[@k12th]

Искушенные пользователи не используют monkey-patching, а берут конфигурируемые плагины.

[@DjPhoeniX]

И если введёный текст совпадает с плейсхолдером, то его надо стереть при повторном фокусе…

[@Roosso]

Вряд ли вы разрешите у себя на сайте регистрацию с Логином «Логин» или телефоном "+7 (код оператора) номер телефона"

Придраться можно ко всему, это давно известный факт.

Скрипт много чего ещё не делает. Но только возникает вопрос, а нужно ли ему уметь это делать!?

[@Fesor]

Просто толку выкладывать обсалютно сырой кастыль для своего проекта на всеобщее обозрение? Пользы от него ноль, написать свой проблемы не составляет, 5 минут работы. фэлбаков тоже хватает.

[@Roosso]

Хабр читают не только хабролюди, которые в принципе уже по-умолчанию считаются в той или иной области специалистами.
И многим такой простой и ясный костыль вполне может помочь. Кому как пример, кому как костыль. А с вашими советами, допилю его до чего то более стоящего.

[@Fesor]

Если люди увидя ваш код начнут так же писать — то это будет плохая услуга. Допилите конечно, больше решений — лучше.

[@cubesun]

Почему только input[type=«text»]? К слову, есть еще: password, email, tel, number и т. д. Для textarea тоже нужен плейсхолдер. Причем для password и number инпутов такой финт с подставлением value вообще не прокатит.

[@DjPhoeniX]

И, кстати, что будет, если отправить такую форму, «заполненную» плейсхолдерами?

[@Roosso]

Согласен.
Исправил.

[@Roosso]

Если у вас в форме 300 текстовых полей, то конечно производительность упадет… Но случится это не только от этого скрипта.

[@Roosso]

Ну не тот случай мне кажется. Все таки речь об инпутах, причем только определенного типа.
Понятно, что можно это сделать плагином, отдельно вызывать на див или класс и вообще можно допилить его до… совершенства. Но я уже говорил, цель была не в этом, а в простом и дешевом способе использовать placeholder.

Скрипт был написан меньше чем за 3 минуты. Чего вы ждете? Очередного решения кроссбраузерности placeholder, коих уже есть с десяток (по меньшей мере). А зачем если они уже есть? Цель оправдана и достигнута, а размышления на тему «почему он мне борщ не варит» это уже полемика.

[@Roosso]

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

Можете хотя бы отдаленно выдать такой пример, что бы это не казалось голословным?

[@Roosso]

Окей. Спасибо за ответ и советы.

[@Roosso]

Можно немного смягчить данный пример.

$(«form input[type='text']») {…

[@Roosso]

Однако… Тот самый неловкий момент осознания… жуть.
Спасибо ещё раз советы и подсказки.
Был рад… на сегодня (домой уже хочу). Завтра можем продолжить.

[@JhaoDa]

$('form').find('input') или $('input.text') или просто $('.text')?

[@Roosso]

Кстати если уточнить условие…
Например:

$(«form»).find(«input[placeholder!='']»).each(functuion() {…
… });

[@Roosso]

Спасибо. Поправил.

[@Makito]

И снова боянистые велосипеды.

[@web4_0]

Полно же плагинов для кроссбраузерной эмуляции плейсхолдера. Мы, например, используем этот:
github.com/miketaylr/jQuery-html5-placeholder/

[@Roosso]

Спасибо за ссылку. Хороший плагин.

[@claustrofob]

Кстати, на мой взгляд, ставить лабел под инпут, а не поверх него, более лучшее решение. Это позволит прятать лабел не при фокусе, а только когда в инпут был вставлен текст, именно так, как ведет себя дефолтный placeholder в последних версиях хрома. В свое время накатал плагин с таким подходом github.com/claustrofob/Default-Text.

[@cubesun]

Вместо $(this).attr('value',tp) лучше просто $(this).val(tp).

[@i_told_you_so]

а почему не

this.value=tp;

?

[@Makito]

потому что если уж пишется в синтаксисе jQuery то нужно писать все в нем а не городить смеси

[@nicothin]

эх… насколько же проклятый ишак затормозил развитие web… лет на 5 — точно.

о статье: слишком просто и очевидно, неуниверсально, уже существуют решения описанной задачи (jQuery-html5-placeholder).

[@Roosso]

Я не на минуту не отрицал существование других решений.
Можно писать плагины и стремится их делать универсальными. Процесс интересный и нужный. Но так же часто бывает нужным иметь простое решение, не задумываясь о лишней суете и деталях. Вот это как раз второй случай.

[@Melorian]

Быть может, стоить создать поддомен «Хабрахабр для маленьких», где разрешить публиковать подобные статьи из цикла «Мой третий день изучения <language|framework|...>»?

[@Mirza]

Я не хочу вас критиковать, но все таки «быстро, дешево и сердито» — это не главное для статьи.
Так не долго дождаться и примера:

function focus_username( e )
{
	if ( e.value == "Имя пользователя" )
	{
		e.value = '';
		return false;
	}
}

[@Mirza]

это было адресовано к автору разумеется )

[@Melorian]

После вашего комментария захотелось перечитать любимый сайт

[@Roosso]

Не по теме… но все же знаю ещё один такой сайт www.1c-bitrix.ru

[@Melorian]

Биологическим оружием не торгую)

[@Roosso]

Наверное впредь я воздержусь писать сюда о подобном. Реакция весьма и весьма двусмысленная.

[@Melorian]

А по-моему, вполне однозначная

[@nicothin]

Создайте опрос на эту тему!
(сам давно это предлагал, считаю что сия, не лишенная иронии, идея вполне может быть реализована)

[@Fesor]

Можно штатными средствами $.support проверять.

[@PaulZi]

ну или хотя бы так:

if(!!('placeholder' in document.createElement('input'))) return; // поддержка placeholders есть

[@drakmail]

А мне вот этот плагин очень нравится.