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 - остальные будут безжалостно удаляться

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

Valid XHTML 1.0 Strict