onkeyup 엔터키 사용 / window.event.keyCode == 13 / 안되는 이유

간단한 게시판을 제작하면서 글을 작성하고 조회하는 과정에서 비밀번호를 입력해서 조회하는 기능을 구현하다가 발생했다.

로그인을 할 때 검색을 할 때도 엔터키를 사용해서 스크립트 함수를 호출하는 방법을 구현했는데

비밀번호를 입력하는 페이지에서만 동작하지 않았다.

---

onkeyup을 input 안에서 사용하게 되면, input이 포커스되어 있을때 키보드의 어떠한 키를 눌렀다가 때는 과정에서 동작한다.

<input type="text" onkeyup="enterFn()">

<script>
    function enterFn(){
        if(window.event.keyCode == 13){
            passwordCheckFn();
        };
    };
</script>
.
.
.

예시를 보면 onkeyup은 input에서 어떠한 키가 눌렀다가 올라올때마나 enterFn()을 호출하게 된다. 

enterFn()은 if문을 통해서 엔터키가 눌렸다가 땔때 passwordCheckFn()을 호출하게 되는데 

이때 "window.event.ketCode == 13" 엔터키의 동작을 확인하는 방법이 되는 것이다.

---

 

문제의 창이다...

엔터키를 누르게 되면 onkeyup을 통해서, 확인 버튼을 클랙 했을 때와 같이 스크립트 함수인 passwordcheckFn() 호출하려고 한다.

<div class="form-floating mx-auto mb-3 w-25">
    <form name=frm>
        <input type="hidden" name="askidx" id="askidx" value="<%=request.getParameter("askidx")%>">
        <div class="form-floating mb-3 ">
            <input type="password" name="pw" class="form-control" id="password" placeholder="" onkeyup="enterFn()">
            <label for="floatingInput">PW</label>
        </div>
    </form>	
</div>

<script>	
    function enterFn(){
        if(window.event.keyCode == 13){
            passwordCheckFn();
        };
    };

    function passwordCheckFn(){
        var frm = document.frm;
        if(document.getElementById("password").value == ""){
            alert("비밀번호를 입력해주세요.");
        }else{
            frm.action="<%=request.getContextPath()%>/passwordchecking.do";
            frm.method="post";
            frm.submit();
            return;
        }
    };
</script>

 

정말 너무 간단하게 구현할 수 있는 기능인데 마음처럼 되지 않아서....정믈느므화그는드....

구글링을 하면서 온갖 방법을 다 해보다가 onkeyup 속성에 관한 놀라운 글을 읽게 되었다..

form 안에 input이 하나뿐이면 onkeyup에 엔터키를 사용하게되면 스스로 submit이 된다는 것이다...

이 말은 엔터키가 눌려서 코드대로라면 onkeyup="enterFn()"이 동작하여야 하지만 그 전에 submit이 된다는 말이다.

그래서 이를 방지하기 위해서 input창을 하나 더 추가해서 사용하라는 것이였다..

그리고 나는 다시 한번 확인을 하게 된다..

어?

왜 이걸 이제 알게 된 걸까... 정말 url 뒤로 input에 입력했던 데이터가 나오면서 submit이 되는 걸 보게 되었다...

 

바로 나는 form 안에 input을 하나 추가했다.

<form name=frm>
    <input type="hidden" name="askidx" id="askidx" value="<%=request.getParameter("askidx")%>">
    <input type="text" style="display:none;"/>
    <div class="form-floating mb-3 ">
        <input type="password" name="pw" class="form-control" id="password" placeholder="" onkeyup="enterFn()">
        <label for="floatingInput">PW</label>
    </div>
</form>

 

<input type="text" style="display:none;"/>를

form 안에 추가하고 진행하니..

놀랍게도 해결이 되었다..