2019.06.18 모달창에 숫자, 영어가 안 적힐 때…
keypress를 활용한 입력창 수정
- modal창을 구성하였다.
- 결과적으로 모달창의 특성상 선택버튼을 누르기보다는 엔터를 쳐서 많이 해결한다.
- 따라서 엔터를 쳤을 때도 선택버튼이 눌려지게 하도록 설계하였다.
javascript 구현
<script type="text/javascript">
$(function () {
$("#username-hm").keypress(function (e) {
e.preventDefault();
if (e.keyCode === 13) {
usernameHM();
}
});
});
- username-hm 이라는 id를 찾아서 keypress가 오면 원래 일어나야할 event를 막고 만약에 그 keycode == 13(enter)면 원래 선택을 눌렀을 때 일어나야 하는 함수가 실행되도록 설계해 놓은 로직이다.
- 굉장히 간단한 함수인데 … 문제는 여기서부터 시작되었다.
다 잘 되는데… 왜 한글만 입력되고 숫자와 영어는 입력되지 않지…??
- 아무리 입력해보려고 해도… 숫자와 영어가 입력이 되지 않는다. 처음에는 잘 모르고 지나갔다. 처음에는 폰트 문제인가 싶어서 폰트를 지우고 해보고(사실 처음에는 숫자와 영어가 입력 안되는 줄도 몰랐다.) 기존에 입력해 놓은 값들로 보통 클릭하여 실행하다보니 어디서부터 문제인지 도대체 갈피를 잡지 못하였다.
- 그렇게 계속 해보다가 알아낸 것이, 한글 입력은 되는데 숫자와 영어는 입력이 안된다는 것이었다.
- 여기서부터 먼 여정이 시작된다. ㅠㅠ
구글링
- 모달창 숫자, 영어 입력오류, 모달창 숫자 입력 오류, 모달창 입력 오류, 모달창 영어 입력 오류 등등… 수 많은 검색어등을 입력해보았지만 어디에도 나와 같은 오류를 겪고 있는 사람이 없었다.
- 이게 참… 영어로 검색을 어떻게 해야 할지도 막막했다.
- 파파고를 돌려서 찾아낸 Error entering numbers when using modal을 검색해봐도… 도저히 나오지 않았다.
도움
- 전에 회사 다닐 때 계셨던 개발자분과 이야기하며 하나 하나 실행해보았다.
- 먼저 자바스크립트가 잘 동작하는지 console.log를 찍어보라.
- 저렇게 적고 숫자와 영어 키를 눌러보니 console창에 1,2 번이 지속적으로 나왔다.
- 즉 e.preventDefault까지는 잘 실행되었으나 그 이후부터는 실행되지 못하고 있는 것이다.
- 단순히 이것만 console 찍은 것만 아니라, 제이쿼리문에도 모두 console을 찍어보았다.
가설
- 그러던 도중 e.preventDefault();를 주석처리하고 실행해 본 결과 영어 타자 및 숫자가 잘 입력되는 것을 확인할 수 있었다. 그리고 구글링 결과 e.preventDefault()가 단순히 지금 일어날 이벤트만 막는 것이 아니라는 것을 알 수 있었다.
- 정말 잘 정리된 사이트가 있어서 첨부한다.
[[JavaScript] JavaScript에서 이벤트 전파를 중단하는 네가지 방법 감성 프로그래밍](https://programmingsummaries.tistory.com/313) - 즉 전파가 이동하는 것에 대한 문제인데 preventDefault는 해당 로직이 일어나지않도록 막지만 상위로는 지속적으로 전파가 전송되게 된다.
- 이게 정확히 어떤 연관이 있는지는 모르겠지만, 단순히 e.preventDefault를 막 사용하면 안된다는 것에 대해 알게 되었다.
해결
<script type="text/javascript">
$(function () {
$("#username-hm").keypress(function (e) {
if (e.keyCode === 13) {
e.preventDefault();
usernameHM();
}
});
- 기존 e.preventDefault의 위치를 if문 안으로 위치함으로서 e.keyCode가 13일 때 실행되도록 하고 해당 함수를 실행하도록 해주었다.
- ㅠㅠ 누군가가 나처럼 고생하지 않기를 바라며 해당 글을 남긴다.