Воскресенье, 25 Марта 2012 12:18

Placeholder для IE

Written by 
Оцени эту запись
(12 Голоса)

Кроссбраузерный placeholderЗадача: сделать кроссбраузерный placeholder.

 
Проблема: IE не отображает placeholder.
 

Часто приходится элементам <input type="text"> и <texarea> задавать некоторое значение по умолчанию. Это можно сделать с помощью атрибута value, но в таком случае пользователь должен предварительно удалять это значение. Есть замечательный атрибут placeholder. Его значение отображается в виде значения по умолчанию, но пропадает при клике на элемент (на фокусе). При этом мы даже умеем стилизировать placeholder'ы - здесь(пункт 3). Но placeholder не отображается в Internet Explorer. Это может кому-то не понравиться.

 

Решение проблемы - задаем нужно значение атрибуту value, пишем скрипт, который на фокусе элемента обнуляет это значение. Получаем таким образом кроссбраузерный placeholder.

 
 
<input type="text" placeholder="оставь свой электронный адрес">
<input type="text" name="email" id="email" value="оставь свой электронный адрес">
 
<script>
$(function(){
$('form.code_form input[type="text"]').focus(function(){
$('form.code_form input[type="text"]').attr('value', '');
});
});
</script>
 
 
Результат: здесь.
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов