Что такое placeholder?
В html5 появилось свойство placeholder, которое можно указать для полей ввода типа input и textarea. Если указан этот параметр, то при пустом поле ввода отображается значение. По умолчанию цвет подсказки #777777.
Пример использования:
|
1 |
<input type="text" placeholder="Введите текст" name="test"/>; |
Данный параметр очень удобен. Лично я перестал использовать label для обозначения полей в некоторых формах.
А как же ie?
А ie как всегда. Ничего не знает и не хочет знать. Некоторые старые браузеры так же не понимают placeholder и мы получаем безымянный input, тем самым доставляя пользователю некоторые неудобства. На сайте
Лечим placeholder в IE и прочих старых браузерах
Этот скрипт можно использовать без каких-либо изменений, т.к. в нем предусмотрено определение наличия placeholder. Если такого параметра браузер не знает, его заменяет функция, которая подставляет текст в поле ввода если input пуст.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
$(function(){
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
$(".hasPlaceholder").css("color", "#777777");
}); |
В скрипте есть строка, задающая цвет текста для placeholder.
|
1 |
$(".hasPlaceholder").css("color", "#777777"); |
Ее можно смело удалить и написать в css
|
1 |
.hasPlaceholder{color: #777;} |
Из минусов – требует JQuery. Хотя я почти во всех своих проектах его использую, так что считаю скрипт идеальным. Пользуйтесь!