[javascript] <input> 태그에 숫자만 입력 (정규식 사용)

 

input 태그에 number 타입의 데이터를 입력함에 따라 타 컬럼의 데이터가 계산되어야하는 경우,

해당 input box에는 string 타입의 데이터가 들어오면 안된다.

 

@input 태그를 써서 데이터 변경을 감지하고, 그때그때 계산을 해주기 때문에

string이 들어오면 바로 NaN 값이 되어버리므로, 다시 number를 입력해도 NaN이 되어버렸기 때문에 계산이 불가하다.

 

결론은, input 박스에 잠깐이라도 string이 입력되어서는 안되는 상황

 

 

<잘못된 방법>

보통 이렇게 type을 number로 주는 경우가 많은데, 이건 잠깐이나마 string 값이 입력된 후 사라지기 때문에 @input에 감지된다. 

<input type="number" @input="changeYearly($event, rowData, index)"/>

 

 

<해결>

type을 text로 바꾸고, oninput에 정규식을 넣어 숫자가 아닌 값이 입력되는 경우 replace로 대체하게 한다.

<input
  type="text"
  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
  @input="changeYearly($event, rowData, index)"
/>