Блог UnderShot`а / Посты / Javascript / Auto Placeholder — автозаполнитель полей

Auto Placeholder — автозаполнитель полей

Привет, читатель/бот/спамер!

Как мы все знаем, с недавней поры в синтаксисе HTML5 появился замечательный аттрибут — placeholder. На данный момент аттрибут placeholder реализован только в WebKit-браузерах.

Как же быть браузерам, чей движок не WebKit? Очень просто — установить себе на сайт «Auto Placeholder»!

Подобных функций сейчас достаточно много, даже на том же хабре, именно там меня и посетила идея о создании собственного «набивателя полей».

Каков же алгоритм сие скрипта?

Сам алгоритм достаточно прост: скрипт ищет поля (input/textarea), если браузер WebKit, ничего не делаю возвращает пользователя, иначе отсеивает поля с аттрибутом «placeholder», и начинает работу с ними.

Применение

К нужным полям просто добавить аттрибут placeholder, не указывая value:

Code

Ничего погрешного не будет, если в элементе будет и value и placeholder:

Code

Установка

Прежде чем вызвать скрипт, нужно его скачать, Кэп. Скачать скрипт, его в <head>:

Code

Перед закрывающим тегом вставить код:

Code

Скачать AutoPlaceHolder.

Try it demo.

Рассказать в …

Подписаться по RSS

Дата: 18.10.2010 • Теги:

autoplacholder,placeholder,html5,webkit,javascript

↑ +5 ↓

Материалы этой категории:

Не найдено.

Просмотров: 2408, комментариев: 7

Добавить комментарий ↓

#1: MegaFill

Типа аналог для

$('input[type="text"]').focus(function() {
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value≠ this.defaultValue){
this.select();
}
});
$('input[type="text"]').blur(function() {
if ($.trim(this.value) == ''){
this.value = (this.defaultValue? this.defaultValue: '');
}
});

18.10.2010, 17:45

@MegaFill да, да, только грамотней и без jq smile

UnderShot

#3: Aleko

Грамотней? Вот это грамотно:

function addEvent(a,b,c){try{a.addEventListener(b,c,false)}catch(e){a.attachEvent(«on"+b,c)};return true}

это просто праздник какой то! O_o

Как надо: function addEvent(a,b,c){return -[1, ]?a.addEventListener(b,c,0):a.attachEvent('on’+b,c)}

19.10.2010, 17:47

@Aleko чем плох мой способ? UnderShot

#5: Latro

а ещё вот вполне нормальній вариант:

function addEvent(a,b,c){return a.addEventListener(b,c,0)||a.attachEvent('on’+b,c)}

21.10.2010, 15:09

#6: Aleko

> Latro
а осел не умрет от попытки выполнить отсутствующее свойство? могу спорить что это вызовет fatal error

29.10.2010, 02:22

#7: Elite Night

А можно его поставить так, что бы выбираешь категорию добавления новости и оно автоматически заполняет ?

24.11.2010, 17:18