input 태그에 숫자만을 입력할 수 있도록 하려면¹ 자바 스크립트의 도움이 필요합니다. 구현이 쉬워 보이지만 다양한 웹 브라우저를 고려하다보면 생각보다 까다롭습니다.

onkeydown 이벤트 핸들러

input 태그에 onkeydown 속성을 추가합니다.

<input type="text" onkeydown="filterNumber(event);">

filterNumber 함수는 다음과 같습니다.

function filterNumber(event) {
  event.preventDefault(); 1
}

1이 어떤 값도 입력할 수 없도록 합니다.

onkeypress 또는 onkeyup 이벤트 핸들러는 사용할 수 없습니다.

onkeypress 이벤트 핸들러를 사용할 수 없는 이유

onkeypress 이벤트 핸들러를 사용하면 한글을 입력할 수 있습니다. 한글 입력에 대해서는 onkeypress 이벤트 자체가 발생하지 않습니다.

onkeyup 이벤트 핸들러를 사용할 수 없는 이유

onkeyup 이벤트는 글자가 입력된 후에 발생하기 때문에 onkeyup 이벤트 핸들러를 사용하면 모든 글자를 입력할 수 있습니다.

그런데 파이어폭스에서는 한글이 입력되는 문제가 있습니다. 이를 해결하려면 input 태그에 ime-mode 스타일을 추가합니다.

<input type="text" style="ime-mode: disabled;" onkeydown="filterNumber(event);">

입력이 가능한 키 코드 설정하기

현재까지는 어떤 값도 입력할 수 없습니다. 지금부터는 다음 예외 규정을 filterNumber 함수에 반영하겠습니다.

• 숫자

• 점

• 단축키

• 특수 키

숫자 입력 허용

먼저 숫자 입력을 허용합니다. event 객체의 1keyCode 속성으로 사용자가 입력한 키 코드를 알 수 있습니다.

function filterNumber(event) {
  var code = event.keyCode; 1
  if (code > 47 && code < 58) {
    return;
  } 
  event.preventDefault(); 2
}

숫자 0의 키 코드는 48이고, 숫자 9의 키 코드는 57입니다. 따라서 키 코드가 47보다 크고 58보다 작으면 숫자를 입력한 것이기 때문에 2가 호출되지 않도록 반환합니다.

점 입력 허용

정수가 아닌 소숫점도 입력할 수 있도록 점(.)의 입력을 허용합니다.

function filterNumber(event) {
  var code = event.keyCode;
  if (code > 47 && code < 58) {
    return;
  }
  if (code === 110 || code === 190) {
    return;
  }
  event.preventDefault();
}

단축키 입력 허용

값을 입력할 때 다양한 단축키를 사용할 수 있습니다.

Ctrl + A

입력한 값을 선택

Ctrl + Z

실행 취소

Ctrl + Y

다시 실행

이런 단축키를 지원하기 위해 Ctrl 또는 Alt 키가 눌러진 상태라면 입력을 허용합니다.

function filterNumber(event) {
  var code = event.keyCode;
  if (code > 47 && code < 58) {
    return;
  }
  if (code === 110 || code === 190) {
    return;
  }
  if (event.ctrlKey || event.altKey) {
    return;
  }
  event.preventDefault();
}

특수 키 입력 허용

마지막으로 왼쪽(←) 또는 오른쪽(→) 방향키와 같은 특수 키 입력을 허용합니다.

function filterNumber(event) {
  var code = event.keyCode;
  if (code > 47 && code < 58) {
    return;
  }
  if (code === 110 || code === 190) {
    return;
  }
  if (event.ctrlKey || event.altKey) {
    return;
  }
  if (code === 9 || code === 36 || code === 35 || code === 37 ||
      code === 39 || code === 8 || code === 46) {
    return;
  }
  event.preventDefault();
}

주요 특수 키 코드는 다음과 같습니다.

1. 폼을 서브밋하는 순간에 값을 검증하는 것이 아니라 숫자만을 입력할 수 있도록 하는 것입니다.