Тут уже поднималась тема об использовании такого замечательного атрибута форм как 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»). Мне конечно об этом известно, и наверное чуть позднее я доработаю этот скрипт до более перевариваемой версии. Но когда он создавался главным критерием было «быстро, дешево и сердито» и с подобной задачей он справился. А что до универсальности скрипта… Сделаем и это, только чуть чуть позднее.
