event.isComposing

input 요소에 keydown 이벤트를 추가하고 텍스트 입력 후 Enter키를 눌렀을 때

const inputEl = document.querySelector('.create input');
const buttonEl = document.querySelector('.create button');

inputEl.addEventListener('keydown', event => {
  if(event.key === 'Enter'){
    console.log(event.key)
    buttonEl.click(); // 저장
  }
});

아래와 같이 콘솔 로그에는 Enter가 두번 찍혔고 저장도 두 번 실행되었다.

 

한글 입력시에만 해당되는데 웹은 영어를 기준으로 동작하나 한글을 입력시 한글을 처리하는 도중에 처리 전과 후로 과정이 2번 들어가기 때문이다. (그러나 입력한 문구 뒤에 특수문자나 숫자를 넣었을 경우에는 해당안됨)

 

확인위해 event.isComposing(분석 중 여부)를 콘솔에 찍어보면

if(event.key === 'Enter'){
    console.log(event.isComposing)
    console.log(event.key)
    buttonEl.click(); //저장
  }

isComposing(분석 중 여부) 값이 true 였다가 false로 끝났다.

 

그래서 중복으로 값이 저장되는 것을 막기 위해서는 아래와 같이 처리한다. (분석이 다 끝났을 경우 진행하도록)

if(event.key === 'Enter' && !event.isComposing){
    buttonEl.click();
 }

 

예전에는 <form> 태그를 사용해서 중복입력을 막으려 했으나

1. <form> 태그는 method와 action(주소)가 필요하고

2. 입력받은 데이터가 해당 주소로 전송될 때 페이지가 새로 고침이 되며 (store 초기화)

3. 이를 막기위해 preventDefault()처리를 해야하는 번거로움이 있어서

시멘틱 태그로 사용하는 경우가 아니라면 굳이 사용할 필요가 없어졌다.

formEl.addEventListener('submit', event => {
  event.preventDefault();
  // 로직 진행
});

 

preventDefault() 란?

* 태그의 기본기능을 막는다.  

<a>태그의 경우 클릭시 해당 주소로 이동하는데 별도로 자바스크립트에 로직을 넣지 않아도 작동한다 이는 <a>태그가 클릭시 이동하라는 기본기능을 가지고 있기 때문이다. <form>태그는 전송과 새로고침이라는 기본기능을 가지고 있다.

<a href="https://google.com">Google</a>

이러한 기본기능을 막는 게 preventDefault() 함수이다.

아래처럼 작성 할 경우 클릭시 해당 주소로 이동하지 못하게 된다.

const aEl = document.querySelector('a');

aEl.addEventListener('click', event = > {
  event.preventDefault();
});

 

 

 

20230116 패스트캠퍼스 FE4기 수업자료를 참고하였습니다.