알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

javascirpt Input 입력폼 엔터키 누를 경우 Submit 막기 본문

Web /Vue js tip

javascirpt Input 입력폼 엔터키 누를 경우 Submit 막기

백곳 2018. 3. 13. 15:45

i. form 태그를 제거하기
> 수정 이전

<form>
  <input type="text" />
</form>


> 수정 이후 (form 태그를 div로 변경)

<div>
  <input type="text" />
</div>



ii. keydown이벤트 추가 후 엔터키 이벤트 제거하기
다른 방법으로 엔터키 발생시 preventDefault()를 추가합니다.

- 모든 엘리먼트에 적용하기

document.addEventListener('keydown', function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
    }
}, true);



- input 태그에만 적용하기(jQuery를 사용)

$('input[type="text"]').keydown(function() {
    if (event.keyCode === 13) {
        event.preventDefault();
    }
});



출처 : https://webisfree.com/2017-08-07/input-%EC%9E%85%EB%A0%A5%ED%8F%BC-%EC%97%94%ED%84%B0%ED%82%A4-%EB%88%84%EB%A5%BC-%EA%B2%BD%EC%9A%B0-submit-%EB%A7%89%EA%B8%B0-prevent



Comments