На день мероприятий тянулся приблизительно 3-й год в новой области. Мне дали дизайн страницы, где в фонах, созданных для ввода пароля (input type=password) были применены не стандартные точки (так именуемые bullet), а внушительные. Если стандартная точка в пароле — это ·, то точка, которую нужно было отрисовать, смотрелась так:

Первая идея, которая пришла в свою неискушенную голову: пойти узнать продакта, на самом деле ли нам нужны как раз такие точки в пароле? Еще поведать ей, как сложно вести взаимодействие с такими сутями, как input. Это оригинальные и блажные детали, с ними легче не соединяться. Но мне пояснили, что такой дизайн был согласован с обладателями бизнеса, а их буйность поспорит со своенравностью input-ов. Таким образом вида не делать эти отличные буллеты у меня не осталось, подробнее на http://kfaktiv.ru/kastomizacija-shrifta-kak-jeto-rabotaet.html.

Далее я, разумеется, начал гуглить, как мне поступить с данными точками. Практически в первые 15 секунд обнаружил отличную публикацию. В ней предполагалось создать кастомный шрифт с одним знаком bullet, который нужно заменять динамически, если у input type=password. Но тогда это решение представилось мне чрезмерным.

Бесполезные поиски решения

Я пошел по пути минимального противодействия и сделал «гениальный» в своей простоте шаг — повысил шрифт внутри пароля до 40px. Это повышало обычную точку до необходимого по внешнему виду объема. Впрочем, как неискушенный создатель, я не увидел, что в данном решении были подводные камни. Они вылезли в стадии испытания.

Выяснилось, что когда интернет-браузер Safari замечает на страничке поле для пароля, он предлагает «Создать качественный пароль» или «Вставить сохраненный пароль». Это смотрится как возникающее окно рядом с полем. Но если у вашего поля большой шрифт, то и у этих являющихся окон будет большой шрифт. Такое действие никто не попытается заметить у себя на веб-сайте: заходишь на страничку, жмешь на поле ввода пароля и принимаешь громадное выпадающее окно. Это необходимо фиксить.

Тогда я подумал: «Возьму и ограничу данную вероятность интернет-браузера, чтобы Safari совсем ничего не предлагал пользователю». Первый же запрос в гугле заявит вам, что если вы желаете ограничить автозаполнение поля, то необходимо показать ему признак autocomplete=off, и будет вам блаженство. А не доверяйте этим публикациям и подсказкам. Это решение нерабочее, в связи с тем что интернет-браузеры в какой-нибудь момент приняли решение, что они не будут заострять внимание на данный признак. Основной причиной игнорирования этого атрибута было то, что автозаполнение ограничивает владелец сайта, а возмущение клиента нацелено на интернет-браузер, который не демонстрирует сохраненный пароль.

Я проиграл битву с автозаполнением пароля, а война длилась. Я начал размышлять, как решить дилемму без повышения шрифта. Моя новая идея содержалась в том, чтобы демонстрировать клиенту стандартное поле ввода (input type=text), а заменять там все знаки на нужные мне, а пароль сохранять где-то рядом — в неустойчивой. Это решение, разумеется, маловероятно в отношении безопасности, а тогда я не помышлял про это, перед мною была цель и казавшееся превосходным решение.

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

Решение: сделать кастомный шрифт!

Мои попытки решить цель длились не 1 день. Я выдумывал решение, выполнял его, давал на испытание, мне появлялись баги, я старался их фиксить, вновь давал на испытание, приобретал назад с иными багами. И так по кругу около недели.

В конечном итоге я пошел за ответом к младшим создателям. Разумеется, первая идея, которая достигла любого, все-таки отколоть у продакта стремление заменять действие input-ов и оставить точки бывшими. Далее они проходили похожий маршрут рассуждений что и я, а опытность в том и заключается, что они на начальной стадии осознавали неудовлетворительность решения. В конечном итоге мне заявили написать кастомный шрифт.

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

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