Скорее всего, у вас было автозаполнение формы в 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 г.