placeholder.js

[qasta]

Могу быть немного не в теме, но вроде бы вот это elv1s.habrahabr.ru/blog/74363/ (там про атрибут placeholder) как раз пересекается с функционалом, представленном в данном топике.

[qasta]

сорри, не туда отправил :). предназначалось для этого топика — habrahabr.ru/blogs/jquery/74313/

[ELV1S]

Я туда уже сослался, между прочим.

[TuiKiken]

Хммм… Действительно неплохо. Я не верстальщик и с html5 знаком только по «слухам», поэтому и городил свой велосипед. И всё же даже на первый взгляд у этого способа на данный момент есть недостатки(в том случае, если браузер не поддерживает html5):
— Подсказки в полях password будут точками
— Если отключен js, то пользователь ничего не увидит.

Так что мой велосипед в данный момент ещё имеет право на жизнь =)

[taldy]

А еще может выясниться что если доктайп будет на странице прописан не HTML5, еще и код будет не валиден за счет использования «недопустимого» атрибута, а в вашем примере скорее всего будет гуд.

[ELV1S]

Скрипт не зависит от доктайпа и уж тем более от валидности. Будет круто, если вы докажите обратное (тогда я найду баг).

[vitkon]

input placeholder=«[e-mail]» в html точно зависит от doctype

[ELV1S]

Да, с паролем есть проблема. nv.github.com/placeholder.js/tests/password.html

[nooze]

Как это сказывается на запоминалке паролей?

[HDg]

Можно не применять placeholder к полю для ввода пароля

[nooze]

И логина…
Можно конечно, но я спрашивал не это. Я так понимаю, ответ на мой вопрос — «плохо сказывается»

[alagar]

в примере на w3c как раз placeholder к полю пароля не применятеся
dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute

Password: [input type=«password» name=«password»]

получается что к полю ввода пароля применять placeholder нельзя?

[HDg]

Видимо разработчики не увидели в этом смысла

[HDg]

кстати можно. только что проверил в хроме. показывается как и в обычном текстовом поле, не зведочками. начинаешь вводить текст — ставятся зведочки

[amid_ukr]

То что хоть какойто браузер реализовал этот аттрибут это действительно классно, но с позиции кроссбраузерности наверно все таки прийдеться юзать велосипед :-(, пока остальные браузеры не подтянуться

[amid_ukr]

Хм попробывал под opera этот аттрибут действительно не работает

[HDg]

вы удивлены? :)

[amid_ukr]

Нет, в топике ж написано что только WebKIT.

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

FF проверять не стал, потому что с ним и так без меня на хабре разберуться, думаю уже было бы уже куча постов а в FF он уже работает. :-))

[Alinaki]

Вот только зачем… Многие люди не понимают, нахрена в текстовом поле что-то написано.

[acy]

Многие люди не понимают куда вообще что-то ввести можно.

[ELV1S]

Можно менять цвет, это второй агрумент.

inputPlaceholder( input, 'red' )

[ELV1S]

::-webkit-input-placeholder

[homm]

На строчке «if (input.placeholder)return false;» эксплорер тоже выходит из функции.

[homm]

Да, и кстати, почему false, а не input?

[homm]

Не, под ие ошибок там куча.

[homm]

Заменил в обработчиках «this» на «input». Так работает.

[ELV1S]

Уже починил. Спасибо за баг-репорт.

[malyshev]

Главная проблема этого решения, и ему подобных (заменяющих свойство value) состоит в том, что при отправке формы, если ничего не вводить, отправятся значения подсказок.

Ну и конкретно у этого скрипта есть еще недостаток в затирании style.color.

Уйти от этого можно 2 путями:
1. Ставить подсказку на background (но тогда понадобится много изображений).
2. Накладывать поверх инпута абсолютно спозиционированный элемент с подсказкой.

[putnik]

А чем плохо подкладывать элемент с текстом под прозрачный input?
Потому что я сильно сомневаюсь, что ваш второй вариант корректно обработает вставку текста без предварительного клика (кстати, этим же плохи скрипты, заменяющие value, они добавляют вставляемый текст к подсказке).

[malyshev]

Да ничем не плохо, можно и так, в принципе разницы нет куда засунуть :)
Главное, чтобы значение value оставалось неизменяемым, остальное — тонкости реализации.

[arty]

input.form.addEventListener('submit', function(){ 
    if (input.value == input.placeholder) input.value = '';
}, true) 

[ELV1S]

Спасибо, починил.

[arty]

можно тогда и закешировать значение /*@cc_on'attachEvent'||@*/'addEventListener'

[arty]

заодно с input.getAttribute('placeholder')

[ELV1S]

Тогда будет нехорошо, если placeholder поменяется после инициализации.

inputPlaceholder(input)
input.setAttribute('placeholder', 'dum-dum')

[arty]

ну не знаю, мне это кажется маловероятным

[ELV1S]

Хотя в такой ситуации и без кеширования input.getAttribute('placeholder') будет некрасиво (текущий placeholder станет value). Так что согласен.

[ELV1S]

Сделал.

[ELV1S]

Затирание style.color исправлено: nv.github.com/placeholder.js/tests/color.html

[BACRHR]

Единственная проблема, что в вашем варианте нельзя ввести тот же текст, что и placeholder, т.е. [e-mail] ввести будет нераельно :) а в HTML 5 можно. Хотя, скорее всего, это не критично

[xolod]

Учитывая, что на практике placeholder (и аналоги) чаще всего используется для подсказок внутри форм, это не представляет никакой проблемы. Ну разве что кто-нибудь будет долбить сервер, доказывая, что его е-мейл на самом деле «Введите свой e-mail», а зовут его «Введите ваше имя» :)

[hlomzik]

Предлагаю ввести флаг пустого поля, который ставить на blur'е и проверять при focus'е. Тогда всё будет работать хорошо.

[arty]

мой давний подход к снаряду с использованием prototype.js, доработанный для placeholder:

Object.extend(Form.Element.Methods, {
        /**
         * Set devault value for text input, it will disappear on focusing input
         * @param element target input
         * @param value given default value
         */
        setDefaultValue: function(element, value) {
                element = $(element);
                value = value || element.readAttribute('placeholder');

                if (!value) return;

                var setDefault = function() {
                        if (element.value.empty()) {
                                element.value = value;
                        }
                }

                function empty(){ 
                        if (element.value == value) {
                                element.value = ''; 
                        }
                }

                setDefault();
                element.observe('blur', setDefault);
                element.observe('focus', empty);
                element.form && $(element.form).observe('submit', empty);

                return element;
        }
);

[easterism]

дык а нельзя добавить сверху
if (typeof(input)=='string') {
input = document.getElementById(input);
}
?
Проще же

[ELV1S]

Можно добавить. Ещё можно разрешить первым аргументом массив. Но я не хочу включать это в основную версию, я хочу оставить скрипт максимально простым.

[ilyaplot]

ilyaplot.ru/posts/zastavlyaem-rabotat-placeholder-v-ie/
Нашел метод без лишнего js. Если в браузере нет поддержки placeholder, то работает js в input.