Подавляющее большинство браузеров сегодня поддерживает HTML5 и CSS3. Даже последние версии Интернет Эксплорера. Тем не менее, некоторые заказчики до сих пор предъявляют требования, чтобы создаваемый сайт хорошо смотрелся в версии IE8.
Данная модель, то есть версия, обозревателя от фирмы Майкрософт характерна тем, что она не умеет читать столь популярные сегодня CSS-свойства, без которых обходится мало какой современный сайт. Здесь и скругленные углы, и тень, и псевдо-элементы :before и :after, и еще много чего.
Среди прочего IE8 (и, конечно же, версии ниже) не умеет подставлять в поля формы значение атрибута placeholder — подсказку, которую очень часто можно увидеть в полях различных форм. Поэтому до сих пор так популярны различные скрипты и плагины, позволяющие с помощью javascript и библиотеки jQuery «вынимать» это значение, если оно прописано для некоторого поля, и подставлять его в это поле в браузере ИЕ8 (и ниже).
Решая данную задачу, просмотрел в интернете различные решения этого вопроса. Должен заметить, что некоторые из них вообще отказались работать в моем проекте.
Очень выручил Lebedenko Nikolay Nikolayevich (Lebnik) — здесь его довольно простое решение http://yapro.ru/web-master/javascript/jquery-placeholder.html . К чести автора, скрипт лично у меня заработал сразу же.
На странице автора можно скачать скрипт и там же прочесть о настройках этого несложного плагина.
Мной был написан упрощенный скрипт для подстановки в поля (input) значения атрибута placeholder, если таковой прописан для данного поля.
Так как скрипт задействуется только в том случае, если посетитель зашел на сайт через браузер ИЕ версии 8 и ниже, то никаких лишних проверок не делалось. Делается только одна проверка — на наличие атрибута placeholder для конкретного поля. В противном случае в input type=»submit» может появиться совершенно неожиданное значение.
Данный скрипт вставлен в хедере страницы и имеет вид
<!--[if lt IE 9]>
<script>
$(document).ready(function(){
$('input').each(function(){
var placeholder = $(this).attr('placeholder')
if(placeholder){
$(this).val(placeholder)
}
$(this).click(function(){
$(this).val('')
})
.blur(function(){
$(this).val(placeholder)
})
})
});
</script>
<![endif]-->
Краткое пояснение к скрипту.
При «обходе» страницы находим все элементы input. Далее проверяем, имеется ли для конкретного поля атрибут placeholder. Если таковой найден, получаем его значение и подставляем его в качестве атрибута value. Таким образом для браузеров серии ИЕ версии 8 и ниже мы подменяем атрибут placeholder атрибутом value, который читается указанными типами браузеров.
Далее прописаны еще пара манипуляций. При клике по полю очищаем значение value, чтобы поле не содержало ничего лишнего, кроме вводимой посетителем информации.
Если же посетитель после клика по полю передумал что-либо вводить в него, желательно восстановить в поле значение placeholder. Поэтому добавлена последняя функция, выполняемая по событию blur.
Возможно, что скрипт составлен не вполне корректно. Однако свою задачу в моем проекте он выполняет так, как нужно. Возможно, пригодится и еще кому-нибудь))