[javascript] input에 숫자만 입력하게 하기 (keyup 이벤트와 input이벤트의 차이 !)

type이 text인 input박스에 숫자만 입력되도록 하는데 이벤트를 keyup으로 했더니 찰나의 순간이지만 문자가 보이고나서 지워지는 것을 볼 수 있었다. keyup대신에 input으로 바꾸니 아예 숫자를 제외한 건 입력이 안되는 것을 확인 할 수 있었다.

 

keyup이벤트

개발자도구를 열어 콘솔에 아래 스크립트를 복사 붙여넣기 한 후 문자를 입력해보세요.

$(".keyupTest").on("keyup", function () {
  const _value = $(this).val();
  const regex = /[^\d]/ig;

  $(this).val(_value.replace(regex, ""))
})

 

input이벤트

개발자도구를 열어 콘솔에 아래 스크립트를 복사 붙여넣기 한 후 문자를 입력해보세요.

$(".inputTest").on("input", function () {
  const _value = $(this).val();
  const regex = /[^\d]/ig;

  $(this).val(_value.replace(regex, ""))
})