[HTML] input 태그에 숫자값만 받는 간단한 방법

1.  oninput 이벤트, 정규식, replace() 함수 활용

oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"

<th>연락처</th>																																										
  <td> 
    <input type="text" id="info01" name="info04" value="" maxlength="3" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"> 
    <span class="date">-</span> 
    <input type="text" id="info02" name="info05" value="" maxlength="4" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
    <span class="date">-</span> 
    <input type="text" id="info03" name="info06" value="" maxlength="4" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">               
  </td>	
</tr>

2.  input type "number" 

<input type="number">

<th>연락처</th>																																										
  <td> 
    <input type="number" id="info01" name="info04" value="" maxlength="3"> 
    <span class="date">-</span> 
    <input type="number" id="info02" name="info05" value="" maxlength="4">
    <span class="date">-</span> 
    <input type="number" id="info03" name="info06" value="" maxlength="4">               
  </td>	
</tr>

3.  입력된 keycode 체크하기

<input type="text" onkeypress="return checkNumber(event)">

function checkNumber(event) {
  if(event.key === '.' 
     || event.key === '-'
     || event.key >= 0 && event.key <= 9) {
    return true;
  }
  return false;
}

 

 

 

 

 

 

 

 

 

출처: https://hianna.tistory.com/413