This is a mobile optimized page that loads fast, if you want to load the real page, click this text.

Вопрос Отслеживание автозаполнения инпута в веб-кит браузерах

Inoi

/dev/null
Команда форума
VIP
15 Окт 2020
3,453
1,638
208
35
Возник э литтл квесчен к профессионалам вёрстки

Я использую тайлвинд + тайлвинд материал юи
Например для инпутов

Всё окей, они отлично выглядят


до момента, пока браузер не начинает их автозаполнять -



В целом я нашёл подобные и около того проблемы, и решил это дописыванием стилей для автофилла браузера

CSS:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0.5) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* non-WebKit */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
    box-shadow: 0 0 0px 1000px rgba(0,0,0,0.5) inset;
    -moz-text-fill-color: white;
}

Стало относительно нормально при автозаполнении -



Окей, ебучий бордер перечёркивает инпут тайлвинда, наверное тогда дописываем



И всё как бы почти идеально


Но есть ньюанс, если ты обновишь страницу -



И через буквально пол секунды, браузер как будто подхватывает фокус, и уже отображает инпуты нормально -



Причём, это ну, на дев моде, на хостинге - он ждёт клика в любое место страницы, чтобы обновить состояние в адекватное.
Шо делати


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

Jerry (ChatGPT)

AI-powered language model
VIP
helper
17 Окт 2023
1,832
200
5
Привет! Возможно, проблема связана с активацией расширенного режима обновления Tailwind UI. Попробуйте включить этот режим, используя атрибут data-turbo-permanent на корневом элементе вашего приложения, чтобы избежать этой проблемы. Надеюсь, это поможет!
 

Harland David Sanders

ChefBurger
Команда форума
Куратор портала
10 Сен 2020
3,497
2,625
219

Inoi

/dev/null
Команда форума
VIP
15 Окт 2020
3,453
1,638
208
35
Не, опытным путём выяснено, что проблема в том что ты не знаешь о том, что существует автофилл-элемент до того, как пользователь повзаимодействует с сайтом.
Он уже отрисован - но твой скрипт об этом не знает.
Соответственно его состояние не меняется.
Т.е. у меня в инпуте есть текст - но состояние инпута такое, как будто его там нет.

Это особенность хромиума, ну веб-кит браузеров, у тебя не существует value как такового в момент, когда оно отображается уже для пользователя.


Автофилл форма - это некий аналог after-before, которому похуй глобально на то что ты там делаешь
Даже если ты симулируешь заполнение формы - то допустим с таким вариантом (спасибо @seaniwe7)



Всё будет окей
Но как только ты попытаешься туда передать значения -


Всё снова пойдет по пизде, потому что их не существует для скрипта до момента, пока пользователь физически не вступит в контакт со страницей.
Я уже попробовал таймауты с проверкой свойства autofill, я попробовал псевдозаполнение (как на примере выше) - в любом случае пока хуй, я перебрал вроде все элементы послушать из советов на стаковерфлоу
Чат жпт советует отлавливать автофилл через animationstart - и это какая то хуйня, которую я впрочем тоже попробовал - предсказуемо не работает.

В цеелом тут и тайлвинд и реакт - не причём на самом деле. Это именно прикол хрома и автозаполнения.
 
Последнее редактирование:

Inoi

/dev/null
Команда форума
VIP
15 Окт 2020
3,453
1,638
208
35
В общем пока что ребята-фронтедеры с которыми я работаю, все вместе не без интереса поебались пару часов, (а потом стали думать что делать)



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

Она всё ещё даст выбрать сохранённый аккаунт по клику -


Но изначально будет просто выглядеть пустой


Как это сделать иначе, оставив автофилл - разумных вариантов не родилось.
Ну вернее родились, конечно, но не один из них не сработал.
 
Последнее редактирование:
Реакции: derrsak

Swayze

Участник портала
6 Окт 2022
66
14
45
Мб я не совсем понял суть, но если использовать onload и чистить значение инпута?(При релоаде страницы должно помочь мб)
 

Inoi

/dev/null
Команда форума
VIP
15 Окт 2020
3,453
1,638
208
35
Так его нету типа, ну значения.
При загрузке страницы - инпут выглядит вот так:



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


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

Логичным (но слегка костыльным конечно) выглядит вариант с юзэффектом и таймером, который отлавливает типа объект автозаполнения - это какой то вот псевдокласс со свойством -webkit-autofill или вроде того, но прикол ещё и в том что

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

Swayze

Участник портала
6 Окт 2022
66
14
45
Если правильно понял, то когда браузер закидывает данные, то значение элемента меняться не будет(value сам) до момента пока не будет клика?
 

Inoi

/dev/null
Команда форума
VIP
15 Окт 2020
3,453
1,638
208
35
Ну типа того, да.
Хром не устанавливает просто значения для входных данных при автозаполнении до момента, пока пользователь физически не вступит в контакт со страницей.
Причём именно пользователь, любым способом, он может кликнуть, может что-то в консоль браузера ввести - но имитация не сработает, типа имитации клика или фокуса, только человек.
Как только он куда-то например кликнул (без разницы куда, в любую область страницы) - значения входных данных из автозаполнения тебе передаются.
И так работает именно вебкит, в мозилле таких изъёбов нет.
 

Swayze

Участник портала
6 Окт 2022
66
14
45
Я так понимаю пробовал ивент добавить фокуса к инпуту(Я про то сработает ли ивент focus когда браузер сам захочет запихнуть данные)?
 

Inoi

/dev/null
Команда форума
VIP
15 Окт 2020
3,453
1,638
208
35
Нет, фокус не триггерит)
Только хуман