Input tag에 [숫자]만 입력하고 싶을 때 Tip!

보통 Input에 숫자만 입력할 수 있게 만들고 싶을 때 type="number"을 사용할 것입니다.

<Input type="number" />

type="number"를 사용하면 최소(=min), 최대(=max)도 간단하게 설정할 수 있어요.

<Input type="number" min="1" max="100" />

<Input type="number" min="1" max="100" step="0.01" />

또한, step을 설정해서 설정된 값을 기준으로 내리거나 올릴 수도 있어요.
( ex. step="10" -> 클릭 시 10씩 증가, 감소 )

---

< ✔️Tip >
우리는 step이 필요없는 경우가 있을 수 있어요.
예를 들어, 핸드폰번호나 인증번호를 입력시 STEP이 필요할까요..?

>> 필요하지않는 기능이 있다면 우리는 지우면 돼요!

그럴 때 사용하기 좋은 CSS와 <Input> 태그에 직접 넣는 방법을 소개해드릴려고 해요.

[ CSS 방법 ]

<style>
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield;
    }
</style>

출처 - w3schools

- Input:: 으로 직접 사용 시 step이 필요한 경우에도 none처리가 될 수 있으니 class name을 사용하는 것을 추천해요!


[ Input - oninput event 방법 ]

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

- oninput event를 사용해서 숫자만 입력할 수 있게 하는 방법인데요.
이때, type="text"를 사용해요.

replace 함수를 사용해서 값을 ' '로 변경해주는 방법으로 (/[^0-9]/g, '')을 사용하시면 정수만 입력가능합니다!