[frontend] safari 브라우저에서, autocomplete ="off" not working bug

 

 

autocomplete를 적용하지 않고 싶은 상황에서,

일반적으로 input 박스에 

autocomplete="off"를 설정하면, 

autocomplete이 적용이 되지 않는다.

 

1. 문제 원인

하지만, 사파리 브라우저에서 이를 적용하더라도 

작동이 잘 안되는 경우가 있다.

 

이유는 label이나 id에 email, name, password가 들어가면 autofill이 적용되도록 설정되어, 첫번째 input에 자동으로 발생한다.

 

 

2. 해결방안

그래서 fake name, password를 추가하여,

실제로 동작하는 input에는 나오지 않도록 한다.

<input
            id="fake_user_name"
            name="fake_user[name]"
            className="fixed top-full" 
            type="text"
            tabIndex={-1}
            value="Safari Autofill Me"
 ></input>

          
<input
            id="fake_password"
            name="fake_[password]"
            className="fixed top-full"
            type="password"
            tabIndex={-1}
            value="Safari Autofill Me"
></input>