[TIL] 엔터와 페이지 이동
오랜만이네..ㅠ…..(반성하자)
어쨌거나 바로 본문으로 들어가작….!!!!
프론트 작업을 하는데 검색창에 글자를 쓰고 엔터를 치면 자꾸 페이지가 이동을 하는 문제가 생겼다.
처음에는 이벤트가 걸려있는가 했더니, 그건 아니었고.
input 엔터 이벤트로 검색해서
<input type="text" onkeyup="if(window.event.keyCode==13){(함수명()}"/>
이렇게 넣었다.
그래도 해결이 안되길래
e.preventDefault()와 e.stopPropagation()를 사용해서 이벤트 전파를 막아봤다.
그래도 실패….ㅠㅠㅠ…..
열심히 구글링을 하다보니, form 태그 안에 input이 하나만 있으면 엔터쳤을때 무조건 페이지 이동이 발생한다는 것을 찾았다…!
자동으로 submit이 이루어지는 것이었다….
심지어 <input type="text"> 이 형태의 input에서만 발생하는 현상이었다..ㅠㅠ
그래서 임시방편으로 input을 하나 더 만들어주었다.
<input type="text" style="display:none;">
이 input은 보이면 안되기 때문에, display:none 으로 해서 숨겨주었다.
그랬더니 바로 해결…..!!!!!!
아니 이런 허망한 경우가 다 있나 ㅠㅠㅠㅠㅠ
그래도 새로운 케이스를 발견하고 해결방법까지 찾아서 기분이 좋다.
다음부턴 form 태그 안에 input이 하나일때는 자동으로 submit이 되지 않도록 방지하는 것이 중요하겠다 ㅎㅎ
좀 더 찾아보니 해결방법이 더 있길래 링크 공유 :)