Comments 43
Пора вспомнить ручками и задни головой, каково это, быть Fron-end разрабом. Более года уже не лез туда.
Открыл статью. Увидел форму для кредиток, где месяц-год вводятся через комбобоксы. Закрыл статью.

А потом люди «натренируются» на таких вот отрыжках, и лепят то же самое в прод.
А что не так с комбобоксами? Они же отлично вписываются. С одной стороны позволяют выбирать из жестко заданного списка, с другой стороны можно ввести значение вручную.
С одной стороны позволяют выбирать из жестко заданного списка, с другой стороны можно ввести значение вручную.

Кондовый <select> не позволяет вам ничего ввести вручную. В статье — именно он. Вы думаете, в гифке случайно там ввод с клавиатуры прерывается, и месяц-год ставятся мышкой? Не случайно, по другому там никак.
У вас в комментарии написано "комбобоксы". Возможно, я не понял вашу мысль.
В примере по ссылке все данные, в том числе месяц/год можно ввести с клавиатуры.

В гифке вообще не увидел ввода дат.
В примере по ссылке все данные, в том числе месяц/год можно ввести с клавиатуры.

Эм, нет. Нельзя.

Edit: пардон, конечно же можно — при условии, что вы угадаете логику программиста, заполнявшего селекты. Что месяц у него начинается с нуля, а год забит полностью, четырьмя цифрами. Если не угадаете — хоть обвводитесь.
UFO landed and left these words here
Если в опциях вообще есть «12». Если их там нет, то ничего не будет происходить вообще. Что примерно 99.9% пользователей воспримут как «эта штука не работает», и пойдут нажимать мышкой. И в этом смысле родной <select> абсолютно ужасен.

Хотя когда есть полная однозначность в формате вводимых данных — то селект вполне нормальный. Но с кредиткой — я уже выше написал. «12» как-то иначе не ввести, а вот «2» нужно вводить как «2», или как «02»? Год двумя цифрами или четырьмя?
На ваших личных картах? Окей. А на моих — год двумя цифрами.
Месяц на картах скорее всего будет писаться с нуля в подавляющем большинстве случаев (но я бы не рискнул спорить, что это будет соблюдаться всегда), но захочет ли пользователь вводить его с нуля?
Двумя, но не везде и не всегда. На non-embossed картах вполне могут напечатать и четырьмя. По крайней мере лет 5 назад у меня лично такая была.
А что не так с комбобоксами? Они же отлично вписываются.

Это конечно дело вкуса, но лично мне дату удобнее вводить при помощи более-менее адекватного datepicker'а с возможностью для ввода текста. А в идеале ещё и с каким-то плэйсхолдером, который показывает нужный формат.

Ээээ, чтобы эту самую дату и выбирать. Для этого вроде бы datepicker и существуют.

Ну в моём понимании это всё ещё date. И datepicker бывают и просто на месяц-год.


Или я бы даже сказал что большинство datepicker конфигурируются чтобы можно было выбирать только месяц-год. Или только год, или даже только месяц.

Но вы же её не выбираете. Вы вписываете туда уже установленную дату с кредитной карты и меняется она тоже весьма не часто.


В моем представлении дейтпикер нужен когда юзеру надо выбирать дату — увидеть календарь, подумать какая дата лучше, прикинуть планы итд. Зачем усложнять интерфейс когда юзеру надо просто скопировать с реальной карты 4 цифры?


edit: Я подумал — я даже против дейтпикераа на поле "день рождения". Потому что запомненное 14031985 вбить в поле дд.мм.гггг проще чем листать до нужного года или вообще разбираться с дейтпикером. Зато дейтпикер будет хорош на поле "когда вы хотите отмечать день рождения" — вот там да, красивый календарик будет в тему.

Опять же нормальный datepicker в моём понимании в данном случае будет иметь поле для ввода 4 цифр(по хорошему ещё и с плэйсхолдером для понимания формата ) и рядом иконку, которая откроет диалог с выбором года(скажем на ближайшие 10 лет) /месяца(12 штук).


Потому что как показывает практика далеко не все любят просто цифры вводить и многим хочется выбирать исключительно мышкой /тыком.


П.С. И на мой взгляд такой datepicker однозначно лучше комбобокса где ещё и скролить надо…

Я подумал — я даже против дейтпикераа на поле «день рождения».

Как только вам где-то придётся столкнуться с плохо листаемым дейтпикером при вводе обязательного дня рождения — вы сразу станете против, даже если до этого не заморачивались.

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

Ну при желании любой контроль можно сделать очень криво. У нас например в GUI стандарте прописано что любой time/datepicker должен иметь поле для ввода цифр. То есть это как бы часть контроля и без неё его вообще не сделаешь.

Согласен.
К примеру, мне очень удобно вводить данные карты, переключаясь между филдами с помощью «tab». И если один из филдов — комбобокс, это не очень приятно.
НО может быть, не всем удобно вводить данные карты именно так. Есть же юзвери, которых надо «контролировать».
Вопрос без сарказма. Как правильно нужно организовывать ввод года и месяца в подобных формах, просто каким-либо контролом с датой?
Какой адовый перевод. «Прославленный список» заставил меня взгоготать вслух.
glorified
[ʹglɔ:rıfaıd] a
1. прославленный
2. выдаваемое за что-л. более достойное, шикарное и т. п.

the ❝hotel❞ was nothing but a glorified flophouse — это была простая ночлежка, которую выдавали за гостиницу; хвалёная гостиница была просто-напросто ночлежкой

Соответственно, я бы перевёл в духе «это по сути простой список».
А Вы в оригинале смотрели? Мне тоже в глаза бросилось, но я подумал на featured.
А нельзя прям на карте вбивать эти данные? Зачем нужно это лишнее ментальное соотношение данных?
Да её и переворачивать не стоит (а просто нарисовать кусок оборотки с CVV где-то рядом), чтоб не создавать себе и юзеру проблем с тем, что данные одной формы не видны все разом.
вопрос по вводу данных карты
в чем преимущество выбора дня и года селектромами вместо просто написать цифры?
кому то это реально удобно?
О, эта форма ввода последнее время что-то во всех твитах, статьях и вообще везде где только можно на глаза мне попадается (в англоязычном сегменте).
Все это красиво и круто (и именно эта форма уже не только на Vue), но вот как активный пользователь инет магазинов не хотел бы ее встречать в действии =) Если регулярно ей пользоваться (а данные карт в магазинах сохранять я не люблю), то меня бы сильно подбешивала эта анимация, ее переворот (как тут уже писали при этом нельзя сразу видеть все что ввел) и эти выпадающие списки (они будут мешать автозаполнению пасс менеджерами).
Многое из статьи красиво своими анимациями, но как-то не очень практично на деле.
оно и не должно быть практично, пользователь должен чувствовать себя беспомощным, находится в состоянии фрустрации, плавно перетекающей в депрессию и желание тратить деньги

А можно ссылочку на чаты в стиле Reddit на вебсокетах? А то в мобильной версии так и не мог найти. Для интеграции с Битрикс куда-нибудь приделаю, будет хотя бы одна красивая и понятная форма общения)

По-настоящему секьюрная интеграция с платёжной системой ни в коем случае не должна отдавать клиентскому JavaScript-у номер кредитки и CVV. Вместо этого инпуты — это на самом деле маленькие IFRAMы с инпутами, а клиентскому коду магазина отдаётся не номер кредитки и прочая конфиденциальная информация, а токен, сформированный платёжной системой.

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

Это называется PCI compliance.
Only those users with full accounts are able to leave comments. Log in, please.