2012-10-27

HTML5 placeholder аттрибут в IE

howto

Есть такой аттрибут в HTML5 - placeholder - он используется для создания серенькой подсказки для элементов ввода, что очень удобно. Большинство браузеров уже вовсю поддерживают placeholder, Но к сожалению, эта штука не работает в IE, и по этой причине placeholder используется не часто.

Сделал небольшой скрипт для jquery, который добавляет поддержку placeholder в этом замечательном браузере:

$(function(){
    //fix placeholders in IE
    if ($.browser.msie){
        $('input[placeholder]').each(function(){
            if (this.value==''){
                var original_value = this.value;
                var this1 = this;
                var value = this.value = this.getAttribute('placeholder');
                this.style.color = 'gray';
                $(this).focus(function(){
                    if (this.value==value){
                        this.value = '';
                        this.style.color = 'black';
                    }
                });
                $(this).blur(function(){
                    if (this.value==''){
                        this.value = value;
                        this.style.color = 'gray';
                    }
                });
                $(this.form).submit(function(){
                    //restore original value
                  if (this1.value==value){
                      this1.value = original_value;
                  }
                });
            }
        });
    }
});

Надеюсь, кому-нибудь поможет.

Upd. Обновил скрипт, сделал восстановление оригинальных значений при сабмите формы.

 

комментарии:

 
Евгений (анонимный пользователь) | 2012-12-21

Спасибо за решение. Помогло, перед этим еще три штуки перепробовал jquery фиксов.

Владимир (анонимный пользователь) | 2013-05-29

Огромное спасибо, помогло!

max | 2013-05-29

Да не за что на самом деле решение не идеально, так как плейсхолдер еще должен исчезать при сабмите формы, нужно будет поправить.

Владимир (анонимный пользователь) | 2013-05-30

Ну тогда ждем от вас новой версии :)

Медуза (анонимный пользователь) | 2013-06-20

Ваше решение очень помогло, спасибо

Марина (анонимный пользователь) | 2013-11-08

Ура! Получилось! Спасибо большое!

Павел Зверев (анонимный пользователь) | 2014-05-07

Спасибо огромное,скрипт очень помог :)

RSS комментариев

Для того чтобы каждый раз не представляться можно войти как зарегистрированный пользователь.

Имя*

разрешены только теги br, font, span, p, strong, u, p, blockquote, a, div, img - остальные будут безжалостно удаляться

разное (189)
howto (124)
программирование (109)
гад-же-ты (75)
мысли (42)
PHP (41)
JavaScript (39)
вебмастеринг (37)
linux (29)
гондураша (28)
юмор (25)
полезное (21)
Android (17)
движок (17)
софт (15)
кино (14)
деньги (14)
видео (13)
музыка (10)
путешествия (10)
интернет (10)
беспредел (10)
книги (10)
diy (9)
занимательная физика (8)
умный дом (8)
ztools (8)
хостинг (7)
Nokia 5800 (7)
языки (7)
lifehack (6)
вебдизайн (6)
css (6)
прелоадер (5)
arduino (5)
oDesk (5)
apple (5)
связной (5)
козлы (5)
аниме (4)
svn (4)
движек (4)
кухня (4)
Python (4)
занимательная юриспруденция (4)
software (3)
synphony (3)
энергия (3)
рестораны (3)
спорт (2)
гитара (2)
webmastering (2)
Java (2)
bash (2)
фото на документы (2)
Ruby on Rails (2)
Берлин (2)
восстановить (1)
годнурас (1)
авторское право (1)
дурдом (1)
SEO (1)
технологии (1)
микросервисы (1)
сайты (1)
наука (1)
C++ (1)
programming (1)
гаджеты (1)
Поиск по блогу:

Valid XHTML 1.0 Strict