Воскресенье, 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>
 
 
Результат: здесь.
 

Комментарии  

 
0 #3 โปรโมชั่นดีแทค 26.01.2016 03:50
โปรดีแทคยอดฮิต เราเลือกมาแต่โป รดีแทคเทพๆซึ่งพ ่อแม่พี่น้องนิย มสมัครใช้งานกัน ในขณะนี้
โดยโดยมากจะเป็น โปรdtacรายวัน
 
 
0 #2 bronze sculpture 19.05.2015 10:21
I’m not that much of a internet reader to be honest but your blogs really
nice, keep it up! I'll go ahead and bookmark your site to come back
down the road. Many thanks
 
 
0 #1 adminchik 03.06.2014 20:12
Рецепты салатов с птицей: http://salatiki.net/recepti_salatov_s_foto/recepti_salatov_s_pticei/ Рыбные супы: http://osupe.ru/ribnie_supi/ Блины с вареньем: http://blinioladi.ru/blini/blini_s_varenem/
 

You have no rights to post comments

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