Эмуляция placeholder в старых браузерах

[Kerny]

Написал небольшой javascript, который эмулирует работу нового атрибута placeholder, появившегося с приходом htm5, в старых браузерах (особый смысл это имеет в ie). Placeholder - выводит текст внутри поля формы, который исчезает при получении фокуса. В сжатом виде скрипт весит всего 1 609 байт.

Плюсы данного решения:

• Не какого лишнего js-кода в html
  
• Маленький размер
  
• Не нужны сторонние библиотеки (например я находил решения с использованием jQuery)
  
• Обработка отправки формы на сервер (т.к при эмуляции подсказки хранятся в value они могут быть отправлены на сервер вместе с другими - заполненными полями). Placeholder.js обрабатывает эту ситуацию и не посылает лишние данные на сервер.
  
• Скрипт проверяет поддерживает ли браузер html5(а в частности атрибут placeholder) и отрабатывает только в том случае, если браузер не поддерживает html5.
  

Минусы:

• Только в браузерах IE 6-8, если input имеет тип password, вместо подсказки будут отображаться точки, которые маскируют пароль.
  

Подробнее

Не хватило рейтинга разместить в нужно ветке форума, но думаю верстальщикам пригодится данное решение и модераторы перенесут тему в нужный раздел.

Обновлено!

Edited October 31, 2012 by Kerny

[CalvinKlein]

думаю вам стоит подумать над тем чтобы заменить window.onload на onDomReady

ещё чтобы подсказка работала там где type="password" можно временно менять type на text

да и можно сделать проверку поддержки браузером html5 внутри скрипта

и последнее замечание: обычно стиль подсказки слегка отличается от стиля текста, так что стоит подумать как это реализовать

Edited August 31, 2012 by CalvinKlein

[Kerny]

ещё чтобы подсказка работала там где type="password" можно временно менять type на text

Отличная идея!

да и можно сделать проверку поддержки браузером html5 внутри скрипта

Тоже об этом думал, думаю реализую.

обычно стиль подсказки слегка отличается от стиля текста, так что стоит подумать как это реализовать

Вот тут даже не знаю как реализовать, ведь разные браузеры по разному стиль placeholder реализуют. Спасибо за замечания и идеи.

[CalvinKlein]

да не за что

о том как реализовать изменения стиля: можно добавлять input'у некоторый css класс

насчёт domready кстати стоит подумать в первую очередь, потому что событие window.onload может сработать гораздо позже чем загрузится и отобразится форма

[Kerny]

Обновил верхний пост, новое описание там же. Теперь осталась одна проблема:

• Только в браузерах IE 6-8, если input имеет тип password, вместо подсказки будут отображаться точки, которые маскируют пароль.
  

Собственно, я ее почти решил. Это связано с тем что у input'ов в IE 6-8, нельзя просто взять и поменять атрибуты функцией setAttribute. Можно менять, только удалив элемент и заново создав с новыми атрибутами. Что, собственно, я и сделал:

function IE(elemEvent, type){
    var el= document.createElement("input"), 
    placeholder = elemEvent.getAttribute("placeholder"),
    title=elemEvent.getAttribute("title");

    el.setAttribute("type", type); 
    el.setAttribute("data-type", "password");
    el.name= elemEvent.name;
    if (title!=null){
        el.setAttribute("title", title);  
    }
    el.setAttribute("placeholder",placeholder); 
    if (type!="password"){
        el.value= placeholder;
    }    
    events(el);

    var parent = elemEvent.parentNode;
    parent.replaceChild(el, elemEvent);
}

Если использовать эту функцию, то будет работать, как нужно, но с одним исключением - мне так и не удалось, новосозданному input'у назначить фокус. Т.е когда input получает фокус ввода, выполняется этот код, удаляя и создавая новый input без фокуса ввода. Пробовал вызывать функцию focus(), чтобы программно установить фокус ввода на новый input, так и не вышло. На данный момент этот код не включен в проект. Если у кого есть идеи с удовольствием выслушаю.

Edited September 1, 2012 by Kerny

[Kerny]

насчёт domready кстати стоит подумать в первую очередь, потому что событие window.onload может сработать гораздо позже чем загрузится и отобразится форма

Пожелание учтено. Обновлено до версии 1.0.4.