input tag에서 한글 막기

HTML input tag에 type="number" 을 준후 영어 e나 한글을 입력해보자! 아마 입력이 될것이다.

원래는 keydown, event.preventDefault() 를 이용하여 원하지않은 입력값을 막는다.

pressdownEvent(e) {
  if(e.key.match(/[0-9]/)){
      return;
  }
  e.preventDefault();
}

이런식으로 하면 Backspace, Tab, 방향키 같은것이 모두 먹히지 않기때문에 따로 예외를 처리해줘야한다.

한글이 지워질까??

하지만 이런방식으로 해도 한글은 막히지 않을것이다. 이는 한글자판이 브라우저에서 event를 인식하지 못하기 때문이라고 한다. 그래서 event.preventDefault같은 방식으로는 한글을 막을수 없다.

해결법

inputEvent(e) {
  if(e.key.match(/[^0-9]/g){
    e.target.value =  e.target.value.replace(/[^0-9]/g, '');
  }
}

이것을 해결하기위해서 input event가 발생할때마다 정규식과 맞는지 확인후 아니라면 빈문자열로 바꿔버려 사용자입장에서는 입력이 안되는것처럼 처리를 할수 있다.