Скорее всего, у вас было автозаполнение формы в Chrome. Данные заполняются желтым фоном и содержат контент, который вам не нужно вводить. Это обеспечивает отличный опыт для вас как пользователя, но дает очень мало возможностей разработчикам знать, что все заполнено.

Это может привести к нарушению такого рода пользовательских интерфейсов. Давайте посмотрим, как этого избежать с помощью нашего собственного пользовательского интерфейса.

Ввод с меткой

Это в основном применимо к интерфейсам, где метка входа закрывает вход. Начнем с создания ввода с меткой.

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

Наш входной контейнер будет использовать направление flex и column для наложения нашей фактической метки и ввода. Нам также нужно сделать это relative, как только мы центрируем нашу метку над вводом. Кроме того, margin-top должен обеспечить точное пространство для нашей этикетки, когда она втягивается.

Центрируйте наш лейбл

Чтобы центрировать этикетку, мы используем технику transform в сочетании с абсолютным позиционированием. Установив top: 50%, он переместит этикетку вниз на 50% высоты контейнера. transform: translateY(-50%) перемещает его назад вверх на 50% высоты метки.

Мы также добавляем pointer-events: none;, чтобы, когда пользователь нажимает на ввод, он игнорирует нашу метку и переходит непосредственно к input, чтобы сфокусироваться.

Обнаружить автозаполнение

Единственный индикатор, который дает нам Chrome, - это применение псевдокласса css :-webkit-autofill к нашему элементу input. Нам нужен способ указать нашему компоненту React, что был применен :-webkit-autofill.

Для этого мы используем CSS-анимацию. Мы создаем две совершенно пустые анимации с разными именами, которые мы можем позже искать в нашем компоненте.

Затем к нашему input, когда он имеет :-webkit-autofill, мы сразу же применяем нашу анимацию под названием onAutoFillStart. Когда у нас нет :-webkit-autofill, мы выполняем onAutoFillCancel.

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

Чтобы получить доступ к запуску анимации, мы можем использовать событие onAnimationStart. Мы передаем это функции с именем handleAutoFill.

Теперь нам нужно немного состояния, чтобы контролировать, выполняем ли мы автозаполнение. Мы добавляем hide значение в состояние и смотрим на наш e.animationName, чтобы увидеть, совпадает ли оно с нашей onAutoFillStart анимацией.

Мы создали onAutoFillCancel, но это не обязательно для этого приложения, потому что у нас есть единственная анимация на нашем input, поэтому, если запущенная анимация не onAutoFillStart, значит, это onAutoFillCancel.

Однако, если у вас есть несколько анимаций на конкретном входе, вам может потребоваться поиск onAutoFillCancel, чтобы определить, было ли отменено автозаполнение.

Скрыть, если заполнено

Чтобы переместить нашу метку в сторону, мы можем применить некоторый CSS, и с нашей предыдущей настройкой перехода метка будет анимирована в сторону. Кроме того, мы добавляем обратно pointer-events на тот случай, если пользователи захотят скопировать текст с метки.

-8px - это 50% нашей высоты текста, так как мы добавили translateY(-50%), который нам нужно преодолеть.

Начнем с чего-то вроде этого

Теперь нам нужно скрыть нашу метку, если значение заполнено путем применения нашего hide имени класса. Мы проводим некоторое сравнение, если у нас есть значение в поле или если наше автозаполнение запущено, тогда мы хотим применить имя класса скрытой метки.

Скрыть при фокусировке / размытии

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

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

Конец

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

Как пользователь Emotion я решил обернуть все это в библиотеку https://github.com/browniefed/emotion-autofill-input

Первоначально опубликовано на сайте codedaily.io 13 января 2019 г.