Как стать автором
Обновить

Комментарии 11

Отделяйте код страны от основной части телефона

Это реально такая большая проблема, что стоит делить ввод на два отдельных инпута?

Сохраняйте фокус после валидации формы

После валидации приложение информирует нас о ошибке, а также оно сбрасывает фокус

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

Во втором случае у Вас одно поле, так что фокус восстановить легко. В первом - два поля. Не факт, что нужно именно в поле пароля фокус ставить. А то ведь кому то может и не понравиться.

Вообще считаю практику кодов страны порочной. Кто-нибудь где-нибудь, кроме как на подобных сайтах, набирает или записывает телефон без кода страны? Все привыкли записывать телефон полностью например 89123456789 или +79123456789. Но сайты приучают нас набирать 9123456789 и +7 выбирать руками из выпадающего списка. Недавно регался на сайте и для каждого кода была одна страна. Не для каждой страны свой код, а именно для каждого кода своя страна. Пытался найти там Россию - не нашёл. Оказалось, что код "+7" зарезервирован под Казахстан.
Вот совет для UX дизайнеров - сносите нахрен выбор страны в отдельном выпадающем списке и сделайте для телефона одно текстовое поле. Или идите до конца: выпадающий список на код страны, выпадающий список на регион, выпадающий список на оператора и ещё выпадающие списки под каждую цифру

Встречал такое поле ввода телефонного номера, в котором код страны был в отдельном списке. И при copy-paste полноформатного номера с «+7» в начале, это «+7» игнорировалось. Или нужный код выбирался в списке, если до этого там был код другой страны. Так же, в номере игнорировались все скобки, пробелы и тире. Это было самое удобное поле для ввода телефонного номера. Идеальное. Хотя, казалось бы, ничего экстраординарного.

Отделяйте код страны от основной части телефона

Попробуйте, например, зарегистрироваться на госуслугах или в куче банков, не имея российской симки. А ведь там сделали как вы хотели.


Несмотря на экран, я нажал ctrl+A и клавишу delete.

Зачем? Почему просто не исправить ошибку/опечатку? Вы хотите странного, имхо.

В кейсе с вводом номера телефона, если отделяем код страны, то нужно обязательно писать свой обработчик вставки из буфера, иначе, каждый раз когда мы вставляем номер у нас в нем будет либо 12 цифр, либо последняя обрежется и получится +7 796 0..., а такая ситуация ещё более бесячаяя

Вы затронули интересную тему, но дела обстоят настолько плохо,что человеку с клавиатурой уже не добиться былой производительности. Отсутствие визуального обозначения фокуса (привет также и Windows с белыми рамками), неперенос фокуса на активное окно, хаотический порядок перехода по Tab (это тянется с 90-х), потеря концепции "default button", неработающая Esc. Жаль, что результаты 90-х годов в построении целостных и продуманных интерфейсов отброшены, забыты и изобретаются заново.

Несмотря на экран, я нажал ctrl+A и клавишу delete. Ох.. Потом я увидел, что код страны тоже удалился... Пришлось вводить его заново.

Я правильно понимаю, что повторный ввод 10 цифр вместо исправления одной вас не смущает, но ввод 12 - это уже слишком?

После валидации приложение информирует нас о ошибке, а также оно сбрасывает фокус,

Я правильно понимаю, что в момент нажатия на кнопку, фокус на неё больше не переносится автоматически, поэтому разработчикам приходится специально сбрасывать фокус, чтобы вам насолить?

Я не понимаю, почему некоторые разработчики не могут автоматически установить фокус в нужное поле.

Я правильно понимаю, что авторизацией через соцсети никто не пользуется, поэтому ничего страшного, если появившаяся экранная клавиатура закроет эти кнопки?

Пожалуйста, проверьте ваши кнопки, чтобы они были созданы через тег. Дайте мне шанс использовать ваш UI.

Я правильно понимаю, что установка tabindex больше не делает элемент фокусируемым?

Я согласен с другими что первый пример вредный,
особенно если автозаполнение запоминает все числа а поле ограчичено по макимуму
в итоге у меня сохранен телефон +79876543210
но заполняется он как +7 (798)7654321
приходится удялять цифру в начале и если форма не слишком жестокая, то остальные числа просто сдвинутся и останется дописать 0 в конце, но иногда бывает так что сдвигается только код страны т.к он отдельным полем и приходится вводить все заново.

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

Со стороны сервера уже можно валидировать и форматировать как хотите. Хотя тут момент такой же как и с email: проверить что номер рабочий можно только попробовав на него позвонить

в итоге у меня сохранен телефон +79876543210но заполняется он как +7 (798)7654321

Такое правда бесит. Или когда поле ввода не понимает, когда номер содержит тире и скобки.

Я выше написал, но повторюсь здесь: такое поведение поля говорит о лени/пофигизму разработчиков или об отсутствии UX-специалиста и тестировщиков.

Достаточно проверять вставляемую строку на наличие кода страны в начале и удалять код из номера, одновременно выставляя правильное значение кода страны в выпадающем списке.

Как правило все "удобства" при вводе номера телефоны приводят к куче проблем:

1) Вставка из буфера обмена вставляет 7 после +7 (ее оставили как вам нравится)

2) Сохраненный браузером номер подставляется криво

3) А что если у меня номер не с +7 ?

Еще могу упомянуть Сбер, который в приложении при вводе получателя платежа, увидев что ты написал +7 радостно скрывает клавиатуру и переключает на цифровую. И раздражают эти свистелки-перделки это очень сильно. Не сказать чтобы в задумке было чтото плохое, но отработано оно должно быть настолько идеально что лучше было и не лезть со своей вездесущей +7.

Автор, вам не надоело из статьи в статью повторять советы?

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.