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

Comments 163

UFO just landed and posted this here
Бесполезный комментарий, спасибо.
Total votes 42: ↑13 and ↓29-16
UFO just landed and posted this here
Справедливо голоса распределились.
This comment wasn’t rated yet0
Спасибо, круто)
мне всегда нравилось как инпут.файл реализован в Сафари
This comment wasn’t rated yet0
Моё мнение: в Safari инпут не "нравится" - там он просто сделан правильно.
This comment wasn’t rated yet0
Согласен. Что за бред — позволять пользователю вводить в поле всякую чепуху (я про ИЕ).
Total votes 1: ↑0 and ↓1-1
это иногда бывает удобно

Например. Заливаем кучу фоток с именами 001.jpg, 002.jpg, ... что бы не клацать мышкой всё время удобно копипастить путь от туда и править имя файла.

Ну конечно очень нечастый пример, но всёже.
Total votes 4: ↑4 and ↓0+4
сам частенько так делаю..
надо искать компромиссное решение
Total votes 1: ↑1 and ↓0+1
бывает, конечно, спору нет. но вы же разработчик. мне было бы приятнее еще многое в браузерах, например, встроенное изменение html и js на лету для своих целей (благих), но разработчики подумали, что в этом нет необходимости (и я согласен).
Не думаю, что разработчики интерфейса Apple сделали так по прихоти...
This comment wasn’t rated yet0
а я копирую путь из файлменеджера и вставляю в поле. можно?
Total votes 2: ↑2 and ↓0+2
А у меня единственное постоянно открытое неконсольное приложение — броузер. Можно?
This comment wasn’t rated yet0
а у меня единственное открытое консольное приложение — Terminal.app, и то он не совсем консольный… Можно?
Total votes 1: ↑1 and ↓0+1
можно, конечно) но представьте обыкновенного пользователя — он так будет делать? те пользователи, которых я знаю, так не делают, им проще найти файл через обозреватель. я за свою работу ни разу не копировал. проще драг&дроп.
This comment wasn’t rated yet0
Спасибо большое, за интерестный и полезный урок, совсем не помешает. ;)
This comment wasn’t rated yet0
будет показываться обычный файл-инпут. В статье это написано.
This comment wasn’t rated yet0
Да, вижу, не заметил...
Тогда нет вопросов - всё очень добротно, интересно и... старо, как мир... Но для новичков - будет полезно.
Total votes 19: ↑1 and ↓18-17
Ну что за паранойя, что за привычка придираться ко всякой мелочи?
Тем более в статье ясно написано: «Если у пользователя будет отключен JavaScript, он увидит обычный файл-инпут.»
А те пользователи кто живут без JS пусть идут лесом.

Кстати, Zhendalf, спасибо за интересную статью.
Total votes 11: ↑4 and ↓7-3
"А те пользователи кто живут без JS пусть идут лесом."
Это где вас такому учили? :(
Total votes 11: ↑6 and ↓5+1
UFO just landed and posted this here
Мне искренне жаль таких горе-мастеров...
Total votes 5: ↑1 and ↓4-3
Как я уже писал когда-то, надо всегда смотреть на что ориентирован сайт.
Большинство современных сайтов без JS будут не только не подобающе работать,
они не будут работать вовсе.

Делать надо исходя из затрат на поддержку при
отключении JS. Есть старое правило - "Цель оправдывает средства".

Если Ваш сайт использует JS для каких-то не сильно сложных преобразований,
и теоритически он можети запросто без него обойтись, ну например реализован просмотр
галереи изображений через JS, однако можно сделать, чтобы при щелчке по preview
картинка открывалась просто в новом окне, а при наличае JS запускалась бы галерея просмотра - то тогда да - совсем просто реализовать такой вариант, и его надо и стоит делать.

Если Вы планируете, что сайт может быть просмотрен через мобильное устройство - то
в этом случае тоже надо учитывать возможность отключения JS.

Если же нет, и Вы планируете что просмотр данного сайта будет идти через PC
или же сайт вообще является веб аппликацией - то смысл убиваться за то, чтобы работало без JS нет вообще. Вы много видели браузеров на компьютерах, где отключен JS? Другое дело, что хорошим тоном было бы предупредить человека про JS, если же это все такие случилось.
Total votes 4: ↑2 and ↓20
Знаете, если вы нигде не видели сайтов, которые будут работать с отключенным JS это во-первых не значит что их нет, во вторых не значит что надо поступать так-же как и они.
Total votes 3: ↑3 and ↓0+3
UFO just landed and posted this here
Заминусовали до нельзя :(
Total votes 3: ↑1 and ↓2-1
UFO just landed and posted this here
Судя по Вашей карме вы много кричали "ИЕ - говно" :)
Total votes 3: ↑0 and ↓3-3
UFO just landed and posted this here
Отвечаю на Ваш вопрос:

"Вы много видели браузеров на компьютерах, где отключен JS?"
- Нет, как правило, всё именно так, как Вы говорите. Такие случаи редки, но знаете, часто бывает так, что в 0.01% попадает заказчик сайта, который абсолютно верно будет ездить вам по рогам, если у вас не было такого опыта, то, извините, это Ваше незнание...
Total votes 3: ↑1 and ↓2-1
Я есть живой контр-пример )
Firefox + NoScript (http://noscript.net/) => по умолчанию все JS отлючены.
Total votes 3: ↑0 and ↓3-3
А для чего? Никогда я этого не понимал.
This comment wasn’t rated yet0
Для безопасности, например, для производительности.
This comment wasn’t rated yet0
как ни крути а на js все равно делают такие вещи pngfix и min-weight для IE6, или ктото знает другие решения ;)
This comment wasn’t rated yet0
Во-первых — min-width, а во вторых, делают это с помощью CSS или expression() опять же в CSS.
This comment wasn’t rated yet0
Здорово-здорово!
Вот только пользователя может слегка заступорить такая замена, плюс надпись «найти файл» не совсем очевидна.
This comment wasn’t rated yet0
Возможно. Но текст на картинке мы всегда можем поменять, а вот текст на обычном инпуте - нет.
This comment wasn’t rated yet0
Прекрасно, достойно! Замечательно! Давно не помню такой хорошей статьи, лишний раз появился стимул заходить сюда чаще. Автор — молодец!
This comment wasn’t rated yet0
Есть ли возможность как-то продумать вариант, если пользователь выбрал файл, а потом передумал и захотел оставить поле пустым?
This comment wasn’t rated yet0
Это сделать вообще нельзя. Мы не можем средствами js изменить value у файл-инпута. Это можно сымитировать, просто убрав текст.
This comment wasn’t rated yet0
Если я не ошибаюсь, присваивать значение инпуту нельзя, но обнулить его, сбросив значение, вполне врзможно.
getElementById("outInput").value = '';
This comment wasn’t rated yet0
Ну можно например удалить со страницы файл-инпут и вставить на его место такой-же но пустой, если обнулять его нельзя.
This comment wasn’t rated yet0
а как же кнопка reset и одноименный метод у форм?
This comment wasn’t rated yet0
Вы забыли добавить слово «Хуясе».
Total votes 8: ↑3 and ↓5-2
Вы забыли, что неприлично перебивать старших ;-)
Total votes 2: ↑1 and ↓10
Хм, а я и не перебивал.
Total votes 1: ↑0 and ↓1-1
вы забыли катиться к чертям
Total votes 5: ↑1 and ↓4-3
UFO just landed and posted this here
Низкий поклон. Полностью согласен, от и до. Mac-style это практически всегда простой, удобный user-oriented (идеальный) вариант. Взял на заметку для использования, в том числе, и в некоторых win32-приложениях.
Total votes 1: ↑0 and ↓1-1
Качественная статья, спасибо.
This comment wasn’t rated yet0
UFO just landed and posted this here
А можно ли все-таки дополнительно дать информацию о пути к файлу?
В тултипе, например.
This comment wasn’t rated yet0
Не стоит, если пользователь только что выбрал файл, он не может забыть какой именно.
Total votes 2: ↑0 and ↓2-2
оно не будет мешать - путь будет появляться при наведении на название файла.
This comment wasn’t rated yet0
согласен. Надо будет в финальной версии этого скрипта сделать. Только полный адрес можно будет получить не во всех браузерах. fileInput.value в некоторых браузерах возвращает полный путь, в некоторых только название файла. Сейчас уже точно не помню где как.
This comment wasn’t rated yet0
Спасибо, очень полезно.

Если кому интересно продолжение темы кастомизации "непокорных" элементов, то
- Кастомайз select'а http://designformasters.info/posts/select-replacement/
- Кастомайз radio&checkbox http://lipidity.com/fancy-form/
- Кастомайз скролла http://www.hesido.com/web.php?page=customscrollbar

Все решения полнофункциональны, т.е. селект работает с клавиатурой (клавиши вверх, вниз и т.п.), скролл реагирует на колесо мыши и якоря.
Total votes 1: ↑1 and ↓0+1
хорошие ссылки. Спасибо ;)
This comment wasn’t rated yet0
вы попробуйте в тот селект (откастомайзеный) вставить больше 20 элементов, не будет окошка выбора со скролом, будет галимая бесконечная лента! А если элементов больше 1000? так будет вообще полная попа. раздосадная штука! у гугла есть рабочие семплы нормально изменённых селектов, и работают они быстрее!
Total votes 2: ↑1 and ↓10
а можно подробнее про рабочие семплы?
This comment wasn’t rated yet0
Мне бы тоже было интересно.
А пока я нашел другой вариант, где скролл не превращается в "галимую ленту": http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ (тем не менее первый вариант для небольших селектов очень приятен)
This comment wasn’t rated yet0
а понту, опять минус просто так поставят
что за люди
This comment wasn’t rated yet0
Отличная идея. А то вечно приходится влазить в этот textbox, прокручивать текст и смотреть, тот ли я файл выбрал.

А можно сделать, чтобы после выбора можно было навести курсор на имя файла и увидеть полный путь во всплывающем комментарии или в строке статуса?
Просто часто полезно глянуть лишний раз, что отправляешь - иногда не только имя, а если там untitled.zip, то и путь. Путь гораздо реже нужен, но хотелось бы не терять эту информацию, а просто убрать её "поглубже".
This comment wasn’t rated yet0
Упс, уже написали выше
This comment wasn’t rated yet0
Вариант когда картинки выключены тоже нужно обсчитывать иначе инпут не видно
Total votes 2: ↑2 and ↓0+2
Шикарно. Просто блеск. Я не думал, что это вообще возможно, а здесь — классная идея и красивая реализация. Пожалуй, лучшее из технического, что я прочитал на Хабре.
This comment wasn’t rated yet0
Круто, но я предлагаю не делать свои костыли а рядом с input-файлом повесить ссылку "К сожаление разработчики %браузер% не всегда знают о своих косяках. Откройте им глаза!". Ну а при клике через аякс вызыввается скрипт отсылающий письмо с текстом "Ещё один посетитель нашего сайта недоволен работой вашего браузера. Просим вас устранить %неисправность%" на support@mozilla.org или куда там ещё.
Total votes 1: ↑0 and ↓1-1
для Java уже есть великолепная реализация на JSF от RichFaces:

http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.jsf

Красивый GUI, множественный выбор, *прогресс загрузки*
This comment wasn’t rated yet0
ООО. Я уже такое делал но чуть по иному и у меян в опере невыходело сделать и ховер тоже невыходил, а тут все есть, плюс однозначно !
Total votes 1: ↑0 and ↓1-1
В целом очень-очень красиво реализовано.
Чуть-чуть, самую малость, критики и предложений по улучшению.

В функции HandleChanges() можно и нужно упростить регулярное выражение до одной строки
fileTitle = fileInput.value.replace(/.*[\\\/]/, '');

И сократите такие вещи как:
case 'avi': pos = '112'; break;
case 'wmv': pos = '112'; break;
case 'flv': pos = '112'; break;

до
case 'avi':
case 'wmv':
case 'flv': pos = '112'; break;
Total votes 1: ↑1 and ↓0+1
fileTitle = fileInput.value.replace(/.*[\\\/]/, '');
Спорно. А что если в одном пути будут и прямые и обратные слеши?
This comment wasn’t rated yet0
а разве в названии файла в юникс-системах могут быть слеши? В виндуз - нет. То есть в адресе не может быть одновременно разных видов слешей.
This comment wasn’t rated yet0
Теоретически, могут: /home/user/nazvanie\ s\ probelami

Но я не уверен в том, как браузеры это дело обрабатывают — сохраняют ли экранирование, не проверял.
This comment wasn’t rated yet0
в виндовсе

D:\>dir "d:\tmp/tmp1\tmp2"
Том в устройстве D не имеет метки.
Серийный номер тома: 9C70-5B85

Содержимое папки d:\tmp\tmp1\tmp2

04.08.2008 21:26 <DIR> .
04.08.2008 21:26 <DIR> ..
04.08.2008 21:26 <DIR> tmp3
0 файлов 0 байт
3 папок 153 398 829 056 байт свободно


пример надуман, но вменах файлов виндос (кажется начиная с w2k, может и раньше), вполне себе понимает прямой слеш как разделитель каталогов
This comment wasn’t rated yet0
Очень сомневаюсь, что при использовании стандартного диалога ОС Виндовс выбора файла, он (диалог) вернет путь к файлу с разносторонними слешами одновременно!
This comment wasn’t rated yet0
выбор файла скорее всего правильные слеши, потому и написал, что пример надуман.
This comment wasn’t rated yet0
а а если так:

dir /tmp
>dir /tmp
Ошибка в формате параметра: "mp".

такчто не все так гладко как хотелосьбы
This comment wasn’t rated yet0
если так, то "/" обрабатывается в другом месте.
Правильнее всего из программы проверять, конечно
This comment wasn’t rated yet0
Еще у инпута в Safari есть безоговорочный плюс. Можно просто сделать драг-н-дроп своего файла прямо на кнопку.
Total votes 1: ↑1 and ↓0+1
круто, сколько таит сафари в себе открытий чудных.
This comment wasn’t rated yet0
Да-да-да, это ведь и есть самое главное достоинство (на мой взгляд) Сафаревского инпута.
This comment wasn’t rated yet0
хм, мало юзал сафари и не знал, про это. В сафари действительно продуманей сделано, спасибо за инфу.
This comment wasn’t rated yet0
Пожалуй в статье не хватает лишь описания того, как сделать большую кнопку. Для этого нужно просто перемещать прозрачный конторл над большой кнопкой вместе с движением мышки.
Total votes 1: ↑1 and ↓0+1
можно гораздо проще. Увеличить размер шрифта + position:absolute; right:0;
This comment wasn’t rated yet0
Это не всегда сработает, в первую очередь в случае широких кнопок.
This comment wasn’t rated yet0
Только вот если ваша кнопка большая по ширине, то все, ку-ку досвидос.
This comment wasn’t rated yet0
Лишний гемор. Лучше так поступить: http://habrahabr.ru/blog/ui_design_and_usability/48274.html#comment1040613
This comment wasn’t rated yet0
Недавно с товарищем как раз спорили по этому поводу. Благодарю за статью.
This comment wasn’t rated yet0
Лучше делать, чтоб при нажатии на кнопку в страницу добавлялся флэш-обьект, в котором вызывается диалог выбора файла.
Тогда вы не зависимы ни от каких инпутов и стилизовать все проще.
This comment wasn’t rated yet0
А у вас случайно не IE8beta1 в режиме эмуляуции IE7 ? там могут быть всякие глюки с CSS...
This comment wasn’t rated yet0
и правда, что-то я стормозил.. это бета ie8.. в ie7 проверил, всё ок...
This comment wasn’t rated yet0
Хммм... Хью Лори... Свой человек :)

Пасибо за инфу, все никак не мог найти толкового туториала на эту тему...
This comment wasn’t rated yet0
Респект за статью.. обязательно буду юзать...

ЗЫ.. добавил в избранное
This comment wasn’t rated yet0
Насущно. Спасибо.
Отдельный респект за "Hugh Laurie - Silent Night.mp3" :)
This comment wasn’t rated yet0
На яндекс почте такое реализовано (почти такое)
This comment wasn’t rated yet0
извините, не разобрался пока, как тут парсер работает, вижу, что странно, через тег img не вставилась картинка:
http://smages.com/i/91/de/91de029bad5689bb1332b62af55edbfb.png
Total votes 2: ↑1 and ↓10
неа, все указал, ну да не важно - оффтоп
This comment wasn’t rated yet0
UFO just landed and posted this here
Что-то никто не отозвался по поводу asp.net контрола. Или здесь нету дотнет-прогеров?
This comment wasn’t rated yet0
Можно поподробнее?
This comment wasn’t rated yet0
в asp.net 2.0 есть встроенный объект, называется FileUpload. Единственное чем он отличается от файл-инпута - тем что он серверный контрол.
Точно также можно сделать и с моим файл-инпутом. Можно добавить некоторые свойства, например количество файл-инпутов, генерируемых изначально или возможность добавления новых.
Пример - телериковский файл-аплод. Сделан он криво, в некоторых браузерах работает меньшая часть кнопки. Да и стоит много уёв. Но на него можно посмотреть, чтобы понять о чем я говорю.
This comment wasn’t rated yet0
насколько помню на клиентской стороне fileUpload работает через стандартный инпут браузера. разве что на него валидаторы навешать можно. а серверная в нем только обработка сабмита формы. и если поставить какойто серверный компонент рядом с аплоадом - получишь кучу траблов - аплоад будет сбрасываться при релоаде страницы

IMHO можно спокойно использовать описанную методику практически ничего не изменяя
не говоря уже о том что создать пользовательский контрол из fileUpload с этой методикой

вспомнилось... когда уже сделают мультиаплоад в браузерах? (в свое время нашел единственный вариант - на флеше. но там не все просто с сессией asp.net2)
This comment wasn’t rated yet0
С регекспами косяки:

1) не нужно два, достаточно одного: /.*[\/\\](.*)/
2) этот код:
var RegExExt =/.*.(.*)/;

должен быть таким:
var RegExExt =/.*\.(.*)/;
This comment wasn’t rated yet0
Может вашу функцию немного переписать?


function HandleChanges(){

  var pos = ['doc', 'bmp', 'jpg', 'jpeg', 'png', 'gif', 'psd', 'mp3', 'wav', 'ogg', 'avi',

             'wmv', 'flv', 'pdf', 'exe', 'txt'].indexOf(fileInput.value.match(/\.([a-z]{3,4})\s*$/)[1]);

  fileName.style.display = 'block';

  fileName.style.background = 'url(images/icons.png) no-repeat 0 -' + (pos < 0 ? 176 : pos * 16) + 'px';

}

Да [].indexOf не будет работать во всех браузерах, тогда добавим


  if (!Array.prototype.indexOf)

    Array.prototype.indexOf = function(value){

      for (var i = 0; i < this.length; i++) 

        if (this[i] === value)

          return i;

      return -1;

    }

Ну или перебор массива добавляем в код функции.
Total votes 2: ↑2 and ↓0+2
Отлично, и с рабочего стола переносятся файлы на кнопку. В избраное.
This comment wasn’t rated yet0
тогда в файле с иконками должны быть повторения: jpeg,jpg - это одна и та же иконка. А если мы захотим что-то добавить, несмотря на то, что иконка уже в файле есть, все равно придется переделывать не только js, но и файл с иконками.
This comment wasn’t rated yet0
Я ожидал такого вопроса, все зависит от вашей задачи (условий). Тогда можно было бы сделать так (еще проще):
function HandleChanges(){

  var ext = fileInput.value.match(/\.([a-z]{3,4})\s*$/)[1];

  var extList = ['doc', 'bmp', 'jpg|jpeg', 'png', 'gif', 'psd', 'mp3',

                 'wav', 'ogg', 'avi', 'wmv', 'flv', 'pdf', 'exe', 'txt'];

  for (var pos = 0; pos < extList.length; pos++)

    if (new RegExp('^(' + 'jpg|jpeg' + ')$', 'i').test(ext))

      break;



  fileName.style.display = 'block';

  fileName.style.background = 'url(images/icons.png) no-repeat 0 ' + (-pos * 16) + 'px';

}

В любом случае switch в решении этой задачи неоптимален.
This comment wasn’t rated yet0
Сорри ошибочка вышла. Имелось ввиду

if (new RegExp('^(' + extList[pos] + ')$', 'i').test(ext))
Total votes 1: ↑1 and ↓0+1
Ага, классно. Спасибо Вам в карму за оптимизацию.
This comment wasn’t rated yet0
Почему-то сработало только в файерфоксе. Ослик не показал иконку.
This comment wasn’t rated yet0
UFO just landed and posted this here
Было бы здорово создать для общего пользования .net компонент :)
This comment wasn’t rated yet0
красиво !
интересно можно ли это решение к фоксу прикрутить в виде addon или greacemonkey (или как оно правильно пишется)
This comment wasn’t rated yet0
Отлично, но осталось несколько проблем. Первая: в разметке большое количество дивов, которые портят семантику.

<div class="blocker"> - ненужен:


1. input полностью прозрачен, скрывать нечего
2. div.blocker прозрачен тоже (там в бэкграунде transparent.gif)

<div id="activeBrowseButton"> - лишняя сущность


нужно просто добавлять класс .active к fakeButton, где спрайтами меняется фон.

При таком бешенном пиаре (временно.нет тут, временно.нет там, открываешь архив с примером - там url-файл лежит, даже вконтакте - и там вступите в группу временно.нет... ) - таких ошибок быть недолжно, неважно генерится это в js или нет.
This comment wasn’t rated yet0
Вы теоретик? :)
Даже у прозрачного input'a есть непрозрачный мигающий курсор в поле ввода.
Total votes 1: ↑1 and ↓0+1
нет я практик и всегда проверяю то что пишу, просто код оптимизировал сразу, чтоб там input обрезаелся wrapper'ом и в любом случае по нему нельзя кликнуть - не по чему, поэтому и не проверял такое.

а за информацию - спасибо, интересный прикол)
This comment wasn’t rated yet0
activeBrowseButton нужет чтобы плавно можно было менять изображение: он появлялся при наведении(вначале оно было на jQuery с анимацией). А блокер, как уже сказали - нужен, чтобы не появлялся текстовый курсор при наведении.
Вы с внимательностью отнеслись к статье - за это спасибо. Но вы не все заметили.
В разметке, вообще говоря, не нужен враппер - его можно создать, и уже внутрь пихать все что нам надо. И это не все.
Финальный код будет в пятничных сниппетах бешенно пиарящегося временно.нет =)
И еще по поводу бешенного пиара - мы стараемся писать хорошие и интересные веб-разработчикам статьи. Пишем не для себя - поэтому и стараемся сообщить о себе как можно большему количеству людей.
This comment wasn’t rated yet0
статья действительно хорошая и что немаловажно своя, а не гугло-собрания из рубрики "28 способов сделать обтекание картинки текстом" :)
молодцы.
но вёрстка избыточна и весьма спорна.

как бы я сделал вёрстку:
#wrapper классом (т.к. их много по странице может быть)
с {position: relative; _zoom: 1} чтобы держать элементы внутри
с {overflow: hidden} чтобы левая часть input[file] (где путь к файлу и может быть курсор) невылезала из контейнера и немешалась.
input[file] не нужен position: absolute и z-index, пусть просто стоит в потоке - оно спокойнее
div.fakeButton ненужен float: left, всё равно всё тут абсолютно позицируется, зачем лишнее? а вот z-index: -1 и top и left по нулям обязательно.
div#FileName - тоже классом и вместо margin'ов лучше задавать ему его родные top и left - надёжней и логичней.
всё - blocker ненужен, а раз анимацию ценой jQuery не делаете (слава богу) то можно и спрайты использовать внутри одного блока fakeButton.

За статью спасибо.
This comment wasn’t rated yet0
Классная фишка! Спасибо, возьму на заметку )
This comment wasn’t rated yet0
Ещё "кликабельные области и их размеры" зависят от используемой темы Windows. Например, в классическом стиле размеры будут отличаться от стандартной темы XP или Vista Aero
This comment wasn’t rated yet0
К сожалению, не знаю, как это сделано в сафари. Но, имхо, неправильно определять тип файла по расширению.
Total votes 2: ↑1 and ↓10
Реальная штука, вообще пятерка, так держать;)
This comment wasn’t rated yet0
Невозможное — возможно.
Впору писать кому-нибуть проект с названием «50 вещей, которые считаются невозможными»
This comment wasn’t rated yet0
Это просто мегакруто.
Авторам увага =)
This comment wasn’t rated yet0
Спасибо.
Все прекрасно работает
This comment wasn’t rated yet0
Товарищи, я одного понять не могу! А как на вКонтакте после того, как я выбираю файл показывается его размер!? сразу после выбора! не понимаю! как!?!?!?
This comment wasn’t rated yet0
жаль в ie5.5, ie8b1 не работает :(
Total votes 1: ↑0 and ↓1-1
А по мне, так легче под все браузеры подогнать, чем портить сайт JavaScript'om.
Ну, не портить конечно, но минус в юзабилити если он отключен.
This comment wasn’t rated yet0
симпатично? возможно. интересно? несомненно.

но я всё же не понимаю, зачем менять привычный пользователю интерфейс??? только для того чтобы угодить дизайнеру?
Total votes 4: ↑2 and ↓20
Ща любители рюшечек навставляют.
Total votes 1: ↑0 and ↓1-1
Мне почему-то кажется, что кастомизация форм — дело темное, и никому, кроме злоебучего дизайнера, не нужное.
Потому что пользователь привык к тому, как выглядят формы. Пользователь привык к тому, как этими формами управлять с клавиатуры. Пользователь может отключить графику, и может отключить JS. Пользователь может зайти на сайт с PDA, и отключить на нем графику.

Все же думал написать полноценный скрипт для кастомизации форм. Джедайское решение выглядит так:
Подключается скрипт, и ищет формы. находит в них инпуты, скрывает их, и выводит вместо них свои. Новые инпуты нормально реагируют на табуляцию, при выделенном селекте(к примеру) при вводе с клавиатуры выбирается нужный элемент, при нажатии вверх/вниз тоже.

Но стоит ли заниматься подобной буней, тратитя на ее доведение до ума недели, когда пользователям это не нужно?
Total votes 2: ↑1 and ↓10
об этом и речь... я аргументирую нежелание изменять глобально вид формы:
1) пользователь привык за несколько лет уже к такому их виду
2) более громоздкий код
3) графика, которая может не загрузиться
4) js, который по-моему мнению имеет другое назначение
5) время уходящее на подгонку всего этого к нормальному виду во всех браузерах

У дизайнера "аргумент" следующий:
"Так круче", "мне так хочется", "я видел такое там-то..."
Total votes 3: ↑3 and ↓0+3
и кстати, кто-нибудь из утверждающих, что поле ввода не нужно и им никто не пользуется проводил какие-то исследования на эту тему или говорит опираясь на свой опыт? лично я пользуюсь полем ввода довольно часто: например в "админке" wordpress при загрузке нескольких файлов мне удобнее один раз нажав на кнопку выбрать файл, а затем просто скопировав путь к нему вставить его в остальные поля ввода, заменив только одну цифру (файлы предварительно пронумерованы). И считаю, что очень удобно, когда поле ввода большое и видно весь путь.

вместе с тем, я согласен, что дизайн по-умолчанию не особо изящный и хотелось бы иметь больше возможностей изменять его (к примеру кнопку сделать более симпатичную, надпись поменять...) И без использования таких громоздких решений. По я против такого кардинального изменения как удаление поля вообще и считаю, что желание дизайнеров непременно сделать этот элемент "как в safari" как минимум необосновано.
Total votes 1: ↑1 and ↓0+1
Присоединяюсь к аргументам по поводу полного пути. Часто, имя файла, само по себе, ни о чем не говорит.
This comment wasn’t rated yet0
хороший пример, для меня был полезен момент с отображенем иконки загружаемого файла.
в вашем методе есть недостаток - если увеличить или уменьшить размеры шрифта, пропорция кнопки инпута картинке-эмулятору будет нарушена, что вызывает "несоответсвующую кликабельность". я использую немного другой алгоритм: динамически перемещаю с помощью жабаскрипта файл-инпут под мишку пользователя в пределах картинки-эмулятора. Это позволяет использовать картинки-эмулятора любого размера и не зависит от шрифта пользователя.
This comment wasn’t rated yet0
UFO just landed and posted this here
> В Опере и IE мы можем написать адрес файла вручную (сомневаюсь, что кто-либо когда-либо пользовался этой возможностью).

Не сомневайтесь, пользуюсь каждый день. ^C в ТоталКоммандере, ^V в браузере.
This comment wasn’t rated yet0
> В Опере и IE мы можем написать адрес файла вручную (сомневаюсь, что кто-либо когда-либо пользовался этой возможностью).

Не сомневайтесь, пользуются. Очень удобно взять полное имя в ТоталКоммандере и выдавить его в браузере.
Total votes 2: ↑1 and ↓10
Есть одна проблема, которая, как мне кажется, не затронута в статье:

Как будет работать данное решение, если загрузка происходит медленно (инпут размещен на реальном сайте, на "тяжелой странице").

Решение дописывать JS по onload черевато тем, что пока onload не "выстрелил" пользователь будет видеть обычный инпут, который потом "мигнув" заменится на эту красоту.

Чтобы избежать подобных метаморфоз (особенно это полезно когда кастомных контролов много на странице) и не обидеть пассажиров без JS (их кстати больше, чем вы думаете, смею заметить) я использую специальный файл стилей noscript.css где все "навороты" прячутся от несчастного без-JSника.

Подключаю его внутри head:

Насколько мне известно, это невалидное решение, но во всех целевых браузерах (в ИЕ6 тоже) работает без помех.
Total votes 1: ↑0 and ↓1-1
Немножко багов:

1) Максимально допустимое имя файла в виндах невозможно выбрать этим контролом ("Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копlemon.jpeg")

2) Если имя укоротить, но оставить длинным, то оно отобразится рядом с инпутом в 2-3 строки и из-за этого фоновая картинка с пиктограммой становится двойной или тройной пиктограммой. Т.е. идею с одной пиктограммой надо откалибровать или перейти к отдельным пиктограммам.

(Сижу в ИЕ6 под XP)
This comment wasn’t rated yet0
Одно хочу добавить, в сафари под Mac Os X вот на такое поле с инпутом файл можно просто перетащить. Именно этого не хватает мне в виндовсе. А квадратная кнопка или круглая по большому счету неважно.
This comment wasn’t rated yet0
В сафари под виндой это тоже возможно. Но этот вопрос уже к производителям браузеров.
This comment wasn’t rated yet0
спасибо, теперь все кнопки одного вида в проекте 8)
This comment wasn’t rated yet0
Да, элегантное решение. Мне понравилось. Воспользуюсь обязательно.
This comment wasn’t rated yet0
классная статья, вот только у меня в опере 9.52 под убунтой не работает.
В фоксе под убунтой же все нормально.
This comment wasn’t rated yet0
UFO just landed and posted this here
хорошая идея, но нужны фиксы ещё для Opera 7.x, 8.x
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