> Frontend/Publishing

001_CSS_Input의 text 타입에 숫자만 입력

Janku 2022. 6. 20. 11:26

Input 태그는 기본적으로 Number && String 입력가능합니다.

 

만약, 숫자만 입력하고 싶을때는 type="number"로 변경해도 됩니다만, 

첫글자는 항상 아래의 사진과 같이 입력이 되더군요,

 

에러 예시

 

아래처럼 코딩하면, type을 text로 유지하면서, oninput을 사용하면 입력되는 내용이 숫자만 입력되게 할 수 있습니다. 

<label class="label">
  <input
    type="text"
    placeholder="Input Number"
    v-model="form.mcySellPrice"
    oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');"
  />
</label>

 

 

해당 코드에서

.replace(/^0[^.]/, '0');

을 제외하면 첫글자에 0을 입력할 수 있습니다.