Как стать автором
Обновить

Input attribute placeholder

Время на прочтение2 мин
Количество просмотров25K
Тут уже поднималась тема об использовании такого замечательного атрибута форм как placeholder. И даже приводились примеры на js (ищем по слову placeholder). И не раз было высказано огорчение, потому что в IE данных атрибут не выполняется.

Сам атрибут очень полезен. Особенно радует экономия места при создании форм (особенно в всплывающих формах). Поэтому было решено не отказываться от атрибута, а просто помочь ему заявить о себе и Internet Explorer. На помощь был призван jQuery.

Мой сосед по цеху в процессе создания кричал «Делай плагином», но поскольку плагину все равно требуется вызов, я решил не заморачиваться и сделать это обычным скриптом.

Решение на jQ простое и нетребовательное. Вставлять код можно куда угодно (не забыв конечно про тег «script»).

$(document).ready(function() {
	/* Placeholder for IE */
	if($.browser.msie) { // Условие для вызова только в IE
		$("form").find("input[type='text']").each(function() {
			var tp = $(this).attr("placeholder");
			$(this).attr('value',tp).css('color','#ccc');
		}).focusin(function() {
			var val = $(this).attr('placeholder');
			if($(this).val() == val) {
				$(this).attr('value','').css('color','#303030');
			}
		}).focusout(function() {
			var val = $(this).attr('placeholder');
			if($(this).val() == "") {
				$(this).attr('value', val).css('color','#ccc');
			}
		});

		/* Protected send form */
		$("form").submit(function() {
			$(this).find("input[type='text']").each(function() {
				var val = $(this).attr('placeholder');
				if($(this).val() == val) {
					$(this).attr('value','');
				}
			})
		});
	}
});


Верстайте с удовольствием.

P.S. Мне уже сделали замечание за цвет текста в полях, и за то, что атрибут используется не только текстовыми полями (type=«text»). Мне конечно об этом известно, и наверное чуть позднее я доработаю этот скрипт до более перевариваемой версии. Но когда он создавался главным критерием было «быстро, дешево и сердито» и с подобной задачей он справился. А что до универсальности скрипта… Сделаем и это, только чуть чуть позднее.
Теги:
Хабы:
Если эта публикация вас вдохновила и вы хотите поддержать автора — не стесняйтесь нажать на кнопку
Всего голосов 32: ↑12 и ↓20-8
Комментарии49

Публикации

Истории

Ближайшие события

7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
28 ноября
Конференция «TechRec: ITHR CAMPUS»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань