onkeypress 엔터 시 새로고침 안 되게 하기

jhin·2024년 4월 19일
1

input 태그에서 onkeypress 속성을 추가하고 엔터키 입력 시 자동으로 submit 되면서 화면이 새로고침되는 현상이 있었다.

<form name="frm" id="frm" method="post">
  <input type="text" onkeypress="press(event);" />
</form>
function press(event){
  if (event.keyCode == 13) {
    fnExecute('1');
  }
}

방법1. return false

<form name="frm" id="frm" method="post">
  <input type="text" onkeypress="return press(event);" />
</form>
function press(event){
  if (event.keyCode == 13) {
    fnExecute('1');
    return false;
  }
}

스크립트 실행 후 false 값을 리턴하고,
onkeypress 속성에도 return 값으로 false가 오게끔 하면 된다.


방법2. event.preventDefault()

<form name="frm" id="frm" method="post">
  <input type="text" onkeypress="press(event);" />
</form>
function press(event){
  if (event.keyCode == 13) {
    fnExecute('1');
    event.preventDefault();
  }
}

엔터키를 누르면 브라우저 기본 이벤트가 발생해 submit 되는데 이를 방지하는 방법이다.
엔터가 발생시 event.preventDefault()를 코드에 추가한다.

0개의 댓글