🟣 HTML input에 숫자만 입력 가능하게 만들 수 있을까?

오늘은 회원가입 페이지 + 신용카드 번호 입력 폼을 만들어 보았다.
4개로 나뉘어진 신용카드 입력란에 숫자 4자리 빼고는 입력 할 수 없게 만들고 싶었다.
다른 값을 입력할 경우 에러 메세지를 뜨게 하는 대신 아예 입력 자체를 못하게 막고 싶었다.
하지만 한글의 특수성 떄문에 생각보다 굉장히 어려운 일이었다.
해결 과정은 꽤 험난했어서 내가 영미권 국가에서 태어났으면 어땠을까 하고 잠시나마 생각이 들었다...

아래는 오늘 작업한 결과물이다.

---

1. 맨 처음 시도한 방법: keyCode 이용해서 걸러내기 (실패🚫)

영어는 걸러낼 수 있지만 한글은 계속 입력이 되었다. 그것도 길이가 무한으로... (분명 최대 길이를 4로 설정해 놓았음)
한글을 입력하고 콘솔로 keycode를 확인해 보니 어떤 한글을 입력하던지 간에 229가 떴다.
그런데 이상한것이 아래 코드로 keycode 229는 걸러지지 않는다는 것이다.
keycode 229는 분명 허용을 하고 있지 않은데 대체 왜...?
구글링을 한 결과 keycode 229는 조합문자와 관련이 있다고 한다(한글도 조합문자임).
이것과 관련해서는 나중에 좀 더 알아볼 예정이다.

function filterNumber(event) { //숫자만 입력하게 해줍니다.
  var code = event.keyCode;

  if ((code > 47 && code < 58) || //숫자
   (code > 7 && code < 10)|| //backspace,tab
    code === 46 || //delete
   (code > 36 && code < 41) || // 방향키
   (code > 95 && code < 106)) { //넘패드 숫자
    return;
  } 

  event.preventDefault(); 
} 

---

2. 두 번째 시도한 방법: HTML 내 input 태그의 ime 모드를 끄기 (실패🚫)

위 keyCode를 이용해 걸러내는 방법에서 한글만 필터링이 되지 않았기 때문에 한글 입력을 끄는 방법을 찾아보았다. ime 모드를 disable 하면 한영키 자체가 먹히지 않고 영어만 입력할 수 있다고 한다.

문제는 이 방법은 IE 브라우저에서 밖에 먹히지 않는다.

<input type= "text" style="ime-mode:disabled;"> //영어밖에 입력할 수 없음. 

---

3. 세 번째 시도한 방법: HTML 내 oninput 속성 추가해서 숫자 외에 입력 못하게 만들기(성공!!!🏆🏆🏆)

엄청난 구글링을 한 결과 oninput 속성을 추가해서 숫자 외의 문자들은 아예 입력 자체가 되지 않게 하는 방법이다.
예전에 학교에서 배운 regex를 다 까먹었기 때문에 해석은 첫번째 replace까지 밖에 불가능하다. 의미는 0-9의 global match(input 내의 모든 match)를 찾아서 빈 스트링으로 replace 하라는 뜻이다. 두번째 replace 다음에 오는 regex는 아직 모르겠다.

<input type= "text" oninput="this.value = this.value
.replace(/[^0-9.]/g, '')
.replace(/(\..*)\./g, '$1');">

오늘도 구글과 블로그를 운영하시는 많은 개발자 분들께 감사드린다.