[Javascript] input 입력란에 숫자만 입력되게 하기!

💡 구현할 것

• 입력란에 숫자를 제외한 한글이나 영문이 작성되지 않도록 하기,,,
  (사실 해당 주제에 대해서는 굉장히 예제도 많고 자료도 많은데,, 나는 생각보다 굉장히 적용이 잘 안되는 작업이었다..)
• 그래서 다시 또 헤매지 않도록 정리해두는 것!!

환경

💡 Vue.js & Element UI로 구조가 잡혀있던 상황

처음에 겪었던 문제점

기존에는 Element UI에서 제공하는 Input 태그를 사용해 UI가 구성되어져 있었기 때문에 나는 그걸 그대로 놔둔 채 작업을 진행하고 싶었다.
그런데 element ui에서 제공하는 태그를 그대로 사용하였더니 이상하게 수많은 예제들이 말하는 해결 방법이 통하지 않았다.

그랬더니 내 동료 분께서 이렇게 말해주셨다.
원하는 기능이 UI 라이브러리 사용으로 인해 적용이 어렵다면, 순수한 HTML로 돌아가서 방법을 적용하는 것이 좋을 수도 있다고 말이다.

이렇게 첫번째 문제는 해결!

두번째로 겪었던 문제점

처음에는 값이 변함에 따라 정규식을 이용해 ㄱ부터 ㅎ까지, 가부터 힣까지, 그리고 영문 a부터 z까지에 해당하는 문자가 등장하면, 빈 값으로 변경해주도록 함수를 작성했었다.
그런데 위와 같이 적용하니까 영어는 e와 E를 제외하고 걸러지고, 한글은 자음 한글자가 도무지 제거 되지 않고 남는 현상이 발생했다.

그래서 이번에는 반대로 생각해서 0부터 9까지를 제외한 다른 문자가 입력되었을 때 마다, 그 즉시 빈 값으로 대체 되도록 하니까 드디어 성공!!

다만, 입력 된 후 글자들이 사라지는 모습이 눈에 보이기는 하지만, 동료와 상의한 결과, 그래도 한 글자가 남는 것 보다는 다 사라지는 것이 원래 구현하려던 목표였기 때문에 더 낫다고 결론을 지어서 마무리 했다!!

최종 해결 방법

// 입금액 입력 시 숫자만 입력되도록 처리
onChange(e) {
  const regex = /[^0-9]/g;
  if (regex.test(e.target.value)) {
    e.target.value = e.target.value.replace(regex, '');
    this.frmData.amount = e.target.value;
  }
}