프로젝트를 진행하다 <input>
을 이용하여 사용자의 입력을 받아오는 기능을 구현하고 있었는데, <input>
입력 폼을 아무리 눌러도 focus가 되지 않았다. submit 버튼 또한 아예 눌러지지 않았다. 이를 해결하기 위해 검색을 통해 알아보고 잊어버리지 않기 위해 기록한다.
알아보니 발생 원인으로는 두 가지가 있을 수 있다고 한다.(다른 원인도 있을 수 있다😂)
처음 의심 했던 원인으로는 첫 번째 경우였다. event.preventDefault()
는 기본적으로 수행되는 이벤트, 예를 들면 submit 버튼을 누르면 페이지가 자동 새로고침 되는 기본적으로 탑재되어있는 이벤트를 막기 위해 사용된다.
나도 마찬가지로 submit 버튼을 누르면 새로고침이 되는 것을 원하지 않았기에 preventDefault()
를 사용했다. 하지만 이것 때문에 <input>
폼이 클릭이 안된다는 것이 논리적으로 맞지 않다고 생각하였고 결론적으로도 맞지 않았다.
처음에 z-index를 의심하지 않았던 이유가 z-index가 낮아서 발생한 것이었다면 <input>
폼이 아예 보이지 않아야 한다고 생각했기 때문이다. 하지만 반전이었다.👍 원인은 z-index 였다. 보이긴 하더라도 z-index 값에 따라 focus가 되고 안되고를 결정 할 수 있다는 것을 깨달았다.
<form>
를 감싼<div>
의 z-index값을 아낌없이 높여주었다.
(1000으로,,😁)