JSFiddle - React, Tailwind, and code Playground

by FullMoon

HTML

<h1>이벤트 핸들링</h1>
<button id="setNum" type="button">숫자만 입력받기 설정</button>
<button id="resetNum" type="button">숫자만 입력받기 해제</button>
<br>
<input type="text" id="numberInput" name="number">
<br>
<span id="insertedKeyCode"></span>

JavaScript

// 숫자만 입력받기 설정 시 사용 함수
var keyEvents = {
  onlyNumber: function(event) {
    // event.keycode 프로퍼티가 없다면 event.which를 대입
    var keyCode = event.keycode || event.which;
    
    // 입력된 키 코드 값을 #insertedKeycode에 삽입
    document.getElementById('insertedKeyCode').innerHTML = keyCode;
    // keyCode가 49 ~ 56 사이라면 입력을 취소 시킴
    if (keyCode < 48 || keyCode > 57) {
      event.preventDefault();
    }
  }
};

// 숫자만 입력 받기 이벤트 설정
function setOnlyNum() {
  var numberInput = document.getElementById('numberInput');
  
  // #numberInput 엘리먼트의 value 값을 초기화
  numberInput.value = '';
  
  // #numberInput 엘리먼트에 keydown이벤트 발생 시 keyEvents.onlyNumber를 실행하도록 이벤트 설ㅈㅇ
  numberInput.addEventListener('keydown', keyEvents.onlyNumber);
  // focus를 #numberInput 엘리먼트로 이동
  numberInput.focus();
}

// 숫자만 입력받기 해제 이벤트 설정
function resetOnlyNum() {
  var numberInput = document.getElementById('numberInput');
  numberInput.value = '';
  
  numberInput.removeEventListener('keydown', keyEvents.onlyNumber);
  numberInput.focus();
}

// 버튼에 이벤트 설정
document.getElementById('setNum').addEventListener('click', setOnlyNum);
document.getElementById('resetNum').addEventListener('click', resetOnlyNum);

var numberInput = document.getElementById('numberInput');
numberInput.addEventListener('keydown', function(){
  var keyCode = event.keycode || event.which;
  document.getElementById('insertedKeyCode').innerHTML = keyCode;
});