Как мы обманули браузеры ради красивого дизайна: разработка нестандартной формы авторизации

Форма авторизации – обязательный элемент большинства сайтов, и на первый взгляд кажется, что все подводные камни её создания уже выявлены. Но недавно мы столкнулись с проблемой, которая заставила буквально «сломать» привычную реализацию формы авторизации.

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

29 Октябрь 2020 31

Для очередного сайта мы решили применить нестандартный вариант оформления полей.

Если не заметили – при клике название поля уходит на границу поля.

Но при реализации столкнулись с тем, что фон подсказок не вписывается в наш дизайн.

Белый фон названия поля и цветной фон подсказки абсолютно не сочетались.

Большинство решений, предложенных в интернете нам по тем или иным причинам не подходили, поэтому было решено самостоятельно изобрести велосипед. Задачу мы разбили на две части: избавление от фона и отказ от автозаполнения других полей. Реализация затруднялась ещё тем, что подсказки — это функционал браузера, а не сайта. Таким образом нам требовалось браузер «обмануть».

Первый обман – если выражаться грубо, мы отложили анимацию появления цветного фона на 9999 секунд. Очевидно, что за это время пользователь точно успеет заполнить форму авторизации.

input{

filter:none;

}

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

-webkit-transition-delay: 9999s;

-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;

}

Второй обман – при загрузке страницы специальный скрипт обходит каждое поле с автозаполнением и ставит на него атрибут readonly, который не дает вставлять подсказку. Далее этот же скрипт снимает блокировку на конкретном поле при клике на него.

$(‘input:not([type=submit]), textarea’).each(function(){

$(this).prop(‘readonly’, true);

});

$( document ).on(‘focusin’, ‘input:not([type=submit]), textarea’, function(){

$(this).prop(‘readonly’, false);

});

А какой из этого следует вывод? При создании красивого и функционального сайта все средства хороши!

Илья Дмитриев Администратор