Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 46
Я использую github.com/Madd/jquery.placeholder
Люди отключающие Javascript — гораздо хуже людей использующих ИЕ6.
Ну почему же? Я, например, специально для загаженных рекламой и всякими неприятными скриптами ресурсов отключаю плагины, фреймы и джаваскрипт. Достаточно эффективно и легковесно получается.
На самом деле достаточно в 90% просто отключить обращение к доменам которые пытаются вам свои куки впихнуть. Реклама и всякие, левые лайки +1 и прочая ерунда исчезает. Сайт остаётся.
Полностью отключать Javascript — это что то за гранью добра и зла…
Полностью отключать Javascript — это что то за гранью добра и зла…
У меня например js для новых для меня сайтов всегда выключен(NoScript). Включаю только если уверен что сайт на котором мне нужен js мне интересен. Можно обьяснить некоторой долей паранои.
я предпочитаю контролировать для каких сайтов я разрешаю использование Javascript, а для каких-то я бы не хотел чтобы они что-то запускали. Например сторонние сервисы по сбору статистики…
Если я вас правильно понял, то вы не используете плагины вроде NoScript? Например он позволяет делать точно то что вы описали.
Именно его я и использую. Гибкость выбора что можно отключить, а что использовать — подкупает. Жаль что такой же функциональности я не нашел в Chrome.
Да, действительно. Жаль, что вы не нашли. :)
chrome.google.com/webstore/detail/odjhifogjcknibkahlpidmdajjpkkcfn
chrome.google.com/webstore/detail/odjhifogjcknibkahlpidmdajjpkkcfn
А случайно не делаете дебаг по каждой строчке яваскрипта, чтобы убедиться, что он ничего плохого не делает?
Не нужно бросаться в крайности.
Тем не менее, даже в большом, надежном магазине я смотрю срок годности на продуктах, изучаю состав чтобы всякую химию не есть. Т.е. я не доверяю безоговорочно свое здоровье магазину, хотя и пользуюсь его услугами. Хотя в какие-то магазины и заведения типа Макдональдса я предпочитаю вообще не заходить.
Тем не менее, даже в большом, надежном магазине я смотрю срок годности на продуктах, изучаю состав чтобы всякую химию не есть. Т.е. я не доверяю безоговорочно свое здоровье магазину, хотя и пользуюсь его услугами. Хотя в какие-то магазины и заведения типа Макдональдса я предпочитаю вообще не заходить.
Осмелюсь предположить, что и со скачиванием файлов из интернета у вас тоже предрасположенности?
Использование value качестве плэйсхолдера к input[type=«password»] (если такое, конечно требуется) не даст результата — будем видеть точки. В таких случаях можно использовать абсолютно спозиционированный label над этим полем
Для type=«password» работать не будет. Необходимо менять этот атрибут.
Также логичен вопрос: а что с автозаполнением форм?
Также логичен вопрос: а что с автозаполнением форм?
На авто заполнение это никак не влияет. Что касается password там все намного сложнее, просто замена атрибута ничего не даст, нужно поле заменять. Вот в нагрузочку тоже валяется, попробуйте совместить:
$.fn.passSwitch = function()
{
this.each(function(){
if (this.tagName.toLocaleLowerCase() == 'input')
{
var el = $(''),
th = $(this),
type = th.attr('type').toLocaleLowerCase() == 'password'? 'text': 'password';
el.attr('type', type);
for (var i = 0, len = this.attributes.length; i < len; i++)
{
if (this.attributes[i].name.toLocaleLowerCase() != 'type')
{
el.attr(this.attributes[i].name, this.attributes[i].value);
}
}
el.val(th.val());
th.replaceWith(el);
}
});
return this;
}
$.fn.passSwitch = function()
{
this.each(function(){
if (this.tagName.toLocaleLowerCase() == 'input')
{
var el = $(''),
th = $(this),
type = th.attr('type').toLocaleLowerCase() == 'password'? 'text': 'password';
el.attr('type', type);
for (var i = 0, len = this.attributes.length; i < len; i++)
{
if (this.attributes[i].name.toLocaleLowerCase() != 'type')
{
el.attr(this.attributes[i].name, this.attributes[i].value);
}
}
el.val(th.val());
th.replaceWith(el);
}
});
return this;
}
тэг source был проигнорирован парсером. toLocaleLowerCase надо заменить на toLowerCase видимо очень спешил когда писал и не заметил что автокмплит подставил.
строчка var el = $(''), должна быть заменена на var el = $('"input"'),
тьфу ты, пора идти спать.
jsfiddle.net/Gm4VZ/
jsfiddle.net/Gm4VZ/
Насколько я помню, половина браузеров вроде не дает менять type у поля password… нужно менять весь элемент, а не только type.
Можно писать так вместо замыкания…
jQuery(function($){
//...code
});
ИМХО, гораздо удобнее использовать AdBlock + список говносайтов, накапливающийся за неделю. Блокировать скрипты я бы не стал.
Я думал в наше-то время уже никто не блокирует JS.
А нет, оказывается еще есть такие люди :-)
А нет, оказывается еще есть такие люди :-)
Учитывая сколько сейчас интерфейса даже на простом сайте пишется на JS, хочется сказать то что вы блочите все сайты и получаете «обломы» в этом только ваша вина и никак не разработчиков этих сайтов
Ну в описанно автором случае имеет место говнокод-с. Такие вещи надо навешивать JS.
Я всё понимаю 21 век, технологии, но HTML надо держать в чистоте.
Я всё понимаю 21 век, технологии, но HTML надо держать в чистоте.
Учитывая сколько сейчас интерфейса даже на простом сайте пишется на JS
Но почему-то для 90% сайтов, на которые я захожу, мне не требуется отключать NoScript. Так что не настолько это «сколько» и велико. Для оставшихся 10% два клика мышкой — и JS включен. За одно только отключение доставших автозапускающихся видеороликов я готов простить NoScript эти два клика.
Не понимаю этой логики:
>Когда я впервые захожу на некоторые сайты, у меня выключен js
и тут же:
>я соcтряпал небольшой скриптик. Как можно увидеть далее, он базируется на jquery
если у вас выключен js, то какого хрена стряпать скриптики на js?
>Когда я впервые захожу на некоторые сайты, у меня выключен js
и тут же:
>я соcтряпал небольшой скриптик. Как можно увидеть далее, он базируется на jquery
если у вас выключен js, то какого хрена стряпать скриптики на js?
Согласен, немного пугает. Но автор всё верно сделал.
Нужно учитывать состояние сайта при выключенном JS. И сделать максимум из полезного функционала сайта работающим в этом состоянии, если это вполне возможно для определённых браузеров и конечно же, если это не потребует баснословных усилий.
В ситуации с атрибутом placeholder это вполне реально, а winbackgo немного облегчил нам жизнь.
Нужно учитывать состояние сайта при выключенном JS. И сделать максимум из полезного функционала сайта работающим в этом состоянии, если это вполне возможно для определённых браузеров и конечно же, если это не потребует баснословных усилий.
В ситуации с атрибутом placeholder это вполне реально, а winbackgo немного облегчил нам жизнь.
Стомилионный хреновый джаваскрипт на жквери для поддержки плейсхолдеров? Круто!
Мысли. По-хорошему, нельзя эмулировать плейсхолдер через value. Это неправильно и чревато всяким говном. Скажем, если какой-то другой скрипт захочет параллельно прочитать значение инпута, он получит вместо пустой строки значение плейсхолдера, а это неправильно. Опять же, зачастую при фокусе народ просто сравниват значение с дефолтным значем плейсхолдера — тоже бред. Ситуация: инпут поиска, плесхолдером стоит пример поискового запроса. Что-нибудь типа «мокрые писечки скачать без регистрации и смс бесплатно». Юзер кликает туда, пишет ровно то же самое и жмет поиск. Скрипт думает что там по прежнему плесхолдер и сабмитит пустую строку. Круто?
Я всегда эмулировал плесхолдер пряча инпут и пихая рядом с ним его клон, только без аттрибута name. Плюс, type=password надо не забыть поменять на type=text, и переткнуть айдишники на случай, если там какой-нибудь цсс. При клике на фейковый инпут, прятал его, а фокус перемещал в настоящий.
В этом случае форма остается полностью валидной. Плейсхолдер никак не влияет на значения, которые она засабмитит.
Ну и еще, нужна функция инициализации ручной. Чтобы ее можно было применить на кусок хтмля, высосанный по аяксу, который нужно вставить куда-нибудь.
Мысли. По-хорошему, нельзя эмулировать плейсхолдер через value. Это неправильно и чревато всяким говном. Скажем, если какой-то другой скрипт захочет параллельно прочитать значение инпута, он получит вместо пустой строки значение плейсхолдера, а это неправильно. Опять же, зачастую при фокусе народ просто сравниват значение с дефолтным значем плейсхолдера — тоже бред. Ситуация: инпут поиска, плесхолдером стоит пример поискового запроса. Что-нибудь типа «мокрые писечки скачать без регистрации и смс бесплатно». Юзер кликает туда, пишет ровно то же самое и жмет поиск. Скрипт думает что там по прежнему плесхолдер и сабмитит пустую строку. Круто?
Я всегда эмулировал плесхолдер пряча инпут и пихая рядом с ним его клон, только без аттрибута name. Плюс, type=password надо не забыть поменять на type=text, и переткнуть айдишники на случай, если там какой-нибудь цсс. При клике на фейковый инпут, прятал его, а фокус перемещал в настоящий.
В этом случае форма остается полностью валидной. Плейсхолдер никак не влияет на значения, которые она засабмитит.
Ну и еще, нужна функция инициализации ручной. Чтобы ее можно было применить на кусок хтмля, высосанный по аяксу, который нужно вставить куда-нибудь.
А еще не помешало б, чтоб не на dom ready вешалось событие, а скрипт с самого начала отслеживал загруженные в дом ноды, искал среди них type text и вешал обработчик. Ибо часто вижу на тяжелых сайтах, что скрипт не успевает сработать и псевдоплейсхолдер при фокусе не исчезает.
Автору: зачем? Ничего нового вы не показали, куча плагинов уже есть. Статья из серии «А я могу написать $tehnology name$ сам без плагина».
Автору: зачем? Ничего нового вы не показали, куча плагинов уже есть. Статья из серии «А я могу написать $tehnology name$ сам без плагина».
Иногда довольно накладно дублировать функционал для того мизерного процента людей, которые отключают javascript.
Placeholder в неподдерживающих их браузерах реализуют через помещение A.P. label (семантика-с) или на худой конец span *под* input (чтобы не выделялся и клики/ховеры не ел). Этот способ не только удобнее, семантичнее и логичнее, но и позволяет создавать интересные штуки, типа убирания плейсхолдер не при фокусе а при вводе первого символа.
Кто не верит мне — смотрите, как например сделано вконтакте.
Кто не верит мне — смотрите, как например сделано вконтакте.
if (!!('placeholder' in document.createElement( 'input' )))
это как будет работать с броузераз, которые поддерживают placeholder и НЕ будет в IE и т. п. ;))
это как будет работать с броузераз, которые поддерживают placeholder и НЕ будет в IE и т. п. ;))
иногда, прежде чем писать свой велосипед, стоит погуглить. по-моему только ленивый не писал свой плейсхолдер-плагин для jquery. даже на хабре были статьи про это.
если уж изобретать велосипед, то особенный, чтобы он был чем-то лучше тыщ аналогов. желательно со сравнением существующих альтернатив.
если уж изобретать велосипед, то особенный, чтобы он был чем-то лучше тыщ аналогов. желательно со сравнением существующих альтернатив.
Заменить 2 строчки кода на 30+ — талант!
В качестве плейсхолдера можно использовать label для input -а вместо value. А если уж без jQuery плагина никуда, то вот пример:
Пример использования:
Осталось только в CSS position-absolute -ом label поместить поверх input
(function($){
$.fn.extend({
labelPlaceHolder: function() {
return this.each(function() {
var $input = $(this), $label = $('label[for='+ $input.attr('id') +']');
if($input.val()) $label.hide();
$input.focus(function(){
$label.hide();
}).blur(function(){
if(!$input.val()) $label.show();
});
});
}
});
})(jQuery);
Пример использования:
$(function(){
$('#searchForm input:text, #loginForm .name input, #loginForm .pass input').labelPlaceHolder();
});Осталось только в CSS position-absolute -ом label поместить поверх input
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
<input placeholder="нажми чтобы написать">