[js입문] input 창에 숫자 입력을 방지토록 하는 방법?(이게 맞는지 몰겠지만)

어느 강의를 보면서 문자가 아닌 숫자를 입력하게 되면 경고창을 뜨도록 하는 alert 를 출력하라는 과제를 받았다.

과제를 보면서 문뜩 떠오른 것 중에 하나가 KeyboardEvent객체 안에 있는 keyCode(해당 문자/숫자의 유니코드 값을 반환해주는 이벤트 속성)가 떠올랐고, keyCode 의 유니코드 값 중 숫자에 해당하는 부분만 건드리면 만들 수 있지 않을까? 라는 아이디어가 떠올랐다

 

그래서 일단 숫자 0~9까지 해당하는 값의 유니코드 값을 찾아서 정리하였다.

숫자	유니코드
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57

 

 

정리된 숫자의 범위를 바탕으로 if 조건문과 연산자를 활용해서 숫자의 유니코드 값 범위에 해당하는 숫자를 입력하는 순간 input의 value에는 null 값이 저장되고, 경고창(alert)이 뜨도록 코드를 작성하였다.

↓ (와.. 코드블럭이라는게 있다는 것을 처음 알았다.)

let input=document.getElementById('input')

input.addEventListener('keypress',(e)=>{
  if(e.keyCode>47.99&&e.keyCode<=57.00){
    input.value=null
    alert("문자를 입력해주세요.")
  } 
})

 

 

그 결과..

 

 

다행히 의도한 것과 같이 정상적으로 로직이 구현되었다.  다만, 이것이 맞는 방법인가? 라고 스스로 물어본다면 확신이 들지는 않는다.

 

만일 이 반대로 문자가 아닌 숫자로만 입력가능하게 로직을 구성한다면 어떻게 해야할까? 한글 자체를 input 창에 입력하지 못하도록 하려면? 특수문자의 사용을 무조건 1번 포함시키도록 하려면?

 

하나를 구현해보니 그 외에도 다양한 방향성에 대해서도 절로 떠올랐다. 역시 공부는 끝이 없다.

 

 

----