Тут уже поднималась тема об использовании такого замечательного атрибута форм как placeholder. И даже приводились примеры на js (ищем по слову placeholder). И не раз было высказано огорчение, потому что в IE данных атрибут не выполняется.
Сам атрибут очень полезен. Особенно радует экономия места при создании форм (особенно в всплывающих формах). Поэтому было решено не отказываться от атрибута, а просто помочь ему заявить о себе и Internet Explorer. На помощь был призван jQuery.
Мой сосед по цеху в процессе создания кричал «Делай плагином», но поскольку плагину все равно требуется вызов, я решил не заморачиваться и сделать это обычным скриптом.
Решение на jQ простое и нетребовательное. Вставлять код можно куда угодно (не забыв конечно про тег «script»).
Верстайте с удовольствием.
P.S. Мне уже сделали замечание за цвет текста в полях, и за то, что атрибут используется не только текстовыми полями (type=«text»). Мне конечно об этом известно, и наверное чуть позднее я доработаю этот скрипт до более перевариваемой версии. Но когда он создавался главным критерием было «быстро, дешево и сердито» и с подобной задачей он справился. А что до универсальности скрипта… Сделаем и это, только чуть чуть позднее.
Сам атрибут очень полезен. Особенно радует экономия места при создании форм (особенно в всплывающих формах). Поэтому было решено не отказываться от атрибута, а просто помочь ему заявить о себе и 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»). Мне конечно об этом известно, и наверное чуть позднее я доработаю этот скрипт до более перевариваемой версии. Но когда он создавался главным критерием было «быстро, дешево и сердито» и с подобной задачей он справился. А что до универсальности скрипта… Сделаем и это, только чуть чуть позднее.
