How to become an author
Search
Write a publication
Pull to refresh

Comments 49

Могу быть немного не в теме, но вроде бы вот это elv1s.habrahabr.ru/blog/74363/ (там про атрибут placeholder) как раз пересекается с функционалом, представленном в данном топике.
Total votes 2: ↑1 and ↓10
Я туда уже сослался, между прочим.
This comment wasn’t rated yet0
Хммм… Действительно неплохо. Я не верстальщик и с html5 знаком только по «слухам», поэтому и городил свой велосипед. И всё же даже на первый взгляд у этого способа на данный момент есть недостатки(в том случае, если браузер не поддерживает html5):
— Подсказки в полях password будут точками
— Если отключен js, то пользователь ничего не увидит.

Так что мой велосипед в данный момент ещё имеет право на жизнь =)
Total votes 5: ↑5 and ↓0+5
А еще может выясниться что если доктайп будет на странице прописан не HTML5, еще и код будет не валиден за счет использования «недопустимого» атрибута, а в вашем примере скорее всего будет гуд.
Total votes 3: ↑0 and ↓3-3
Скрипт не зависит от доктайпа и уж тем более от валидности. Будет круто, если вы докажите обратное (тогда я найду баг).
This comment wasn’t rated yet0
input placeholder=«inbox@disney.com» в html точно зависит от doctype
This comment wasn’t rated yet0
Как это сказывается на запоминалке паролей?
Total votes 3: ↑2 and ↓1+1
Можно не применять placeholder к полю для ввода пароля
This comment wasn’t rated yet0
И логина…
Можно конечно, но я спрашивал не это. Я так понимаю, ответ на мой вопрос — «плохо сказывается»
Total votes 4: ↑2 and ↓20
Видимо разработчики не увидели в этом смысла
Total votes 1: ↑1 and ↓0+1
кстати можно. только что проверил в хроме. показывается как и в обычном текстовом поле, не зведочками. начинаешь вводить текст — ставятся зведочки
This comment wasn’t rated yet0
То что хоть какойто браузер реализовал этот аттрибут это действительно классно, но с позиции кроссбраузерности наверно все таки прийдеться юзать велосипед :-(, пока остальные браузеры не подтянуться
Total votes 1: ↑0 and ↓1-1
Хм попробывал под opera этот аттрибут действительно не работает
Total votes 2: ↑1 and ↓10
вы удивлены? :)
Total votes 2: ↑1 and ↓10
Нет, в топике ж написано что только WebKIT.

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

FF проверять не стал, потому что с ним и так без меня на хабре разберуться, думаю уже было бы уже куча постов а в FF он уже работает. :-))
Total votes 2: ↑1 and ↓10
UFO just landed and posted this here
Вот только зачем… Многие люди не понимают, нахрена в текстовом поле что-то написано.
Total votes 4: ↑2 and ↓20
Многие люди не понимают куда вообще что-то ввести можно.
Total votes 3: ↑3 and ↓0+3
UFO just landed and posted this here
Можно менять цвет, это второй агрумент.

inputPlaceholder( input, 'red' )
This comment wasn’t rated yet0
UFO just landed and posted this here
На строчке «if (input.placeholder)return false;» эксплорер тоже выходит из функции.
Total votes 1: ↑1 and ↓0+1
Да, и кстати, почему false, а не input?
Total votes 1: ↑1 and ↓0+1
Не, под ие ошибок там куча.
Total votes 1: ↑0 and ↓1-1
Заменил в обработчиках «this» на «input». Так работает.
Total votes 2: ↑1 and ↓10
Уже починил. Спасибо за баг-репорт.
This comment wasn’t rated yet0
Главная проблема этого решения, и ему подобных (заменяющих свойство value) состоит в том, что при отправке формы, если ничего не вводить, отправятся значения подсказок.

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

Уйти от этого можно 2 путями:
1. Ставить подсказку на background (но тогда понадобится много изображений).
2. Накладывать поверх инпута абсолютно спозиционированный элемент с подсказкой.
Total votes 3: ↑2 and ↓1+1
А чем плохо подкладывать элемент с текстом под прозрачный input?
Потому что я сильно сомневаюсь, что ваш второй вариант корректно обработает вставку текста без предварительного клика (кстати, этим же плохи скрипты, заменяющие value, они добавляют вставляемый текст к подсказке).
This comment wasn’t rated yet0
Да ничем не плохо, можно и так, в принципе разницы нет куда засунуть :)
Главное, чтобы значение value оставалось неизменяемым, остальное — тонкости реализации.
This comment wasn’t rated yet0
input.form.addEventListener('submit', function(){ 
    if (input.value == input.placeholder) input.value = '';
}, true)
Total votes 1: ↑1 and ↓0+1
можно тогда и закешировать значение /*@cc_on'attachEvent'||@*/'addEventListener'
Total votes 1: ↑1 and ↓0+1
заодно с input.getAttribute('placeholder')
This comment wasn’t rated yet0
Тогда будет нехорошо, если placeholder поменяется после инициализации.

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

This comment wasn’t rated yet0
ну не знаю, мне это кажется маловероятным
This comment wasn’t rated yet0
Хотя в такой ситуации и без кеширования input.getAttribute('placeholder') будет некрасиво (текущий placeholder станет value). Так что согласен.
This comment wasn’t rated yet0
Единственная проблема, что в вашем варианте нельзя ввести тот же текст, что и placeholder, т.е. inbox@disney.com ввести будет нераельно :) а в HTML 5 можно. Хотя, скорее всего, это не критично
Total votes 1: ↑1 and ↓0+1
Учитывая, что на практике placeholder (и аналоги) чаще всего используется для подсказок внутри форм, это не представляет никакой проблемы. Ну разве что кто-нибудь будет долбить сервер, доказывая, что его е-мейл на самом деле «Введите свой e-mail», а зовут его «Введите ваше имя» :)
This comment wasn’t rated yet0
Предлагаю ввести флаг пустого поля, который ставить на blur'е и проверять при focus'е. Тогда всё будет работать хорошо.
This comment wasn’t rated yet0
мой давний подход к снаряду с использованием 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;
        }
);

Total votes 1: ↑1 and ↓0+1
дык а нельзя добавить сверху
if (typeof(input)=='string') {
input = document.getElementById(input);
}
?
Проще же
This comment wasn’t rated yet0
Можно добавить. Ещё можно разрешить первым аргументом массив. Но я не хочу включать это в основную версию, я хочу оставить скрипт максимально простым.
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr