autofill 반응하는 js만들기

input에서 autocomplete가 됐을때 전역적으로 css가 세팅되어있었다.

근데, 해당input태그안에 icon이 있었는데, 전역으로 세팅되어 있는 색과 같아서 자동완성 된 상태의 input박스 내부에서 안보이는 이슈가 발생하였다.

제일 먼저 든 생각은 input에서 autofill이란 이벤트가 발생하면 처리하자 였다.

근데 그런 이벤트가 따로 발생하는걸 어떻게 확인해야할지 모르겠다.

monitorEvents($("input")[0]);를 활용해서 이벤트를 찾아봐도 안나오고 좀 많이 해맸다.

$('#아이디').keyup(function () {
	if($(this).val() !== '') {
		if($('input#아이디').css('-webkit-box-shadow') !== 'none') {
			$('.icon-search').css('color','black')
		} else {
			$('.icon-search').css('color','white')
		}
	} else {
		$('.icon-search').css('color','white')
	}
}) 

그래서 그냥 val값이 바뀔 때, 동적으로 색을 검정으로 바꾸자란 생각으로 도달했다.

근데 당연스럽게 input태그의 html태그가 먼저 변동된걸 확인하고나서 jquery가 동작하기때문에, 깜빡깜빡 거리는 이슈가 발생했다.

해결방도는 간단했다.

input:-webkit-autofill + font {
color:black
}

input 태그 다음 태그에 font 태그안에 icon이 있었기 때문에, 해당 태그를 그냥 css로 받아 버리면 되는거였다.

처음에 생각하진 않은건 아니었는데.. css에 약해서 이웃태그를 처리하는걸 이상하리만큼 많이 안해본것같다.

다양한 해결방법이 있었겠지만... 참 많이 정진해야겠다.