JavaScript_두 INPUT 값 자동 합산 구현/ 숫자만 입력되도록 구현 하는 방법

1.  두 input 값 id를 받아 자동 합산 기능 구현 함수 작성

- jquery를 사용하여 첫번째 input 값과 두번째 input 값을 받아와 마지막 input 박스에 삽입한다.

- Number()는 문자를 숫자를 변환해주는 함수이다.

 

    function GetSum() {
       var total = '';
       var firstNum = 0;
       var secondNum = 0;

       firstNum  = Number($('#NUM1').val());
       secondNum = Number($('#NUM2').val());
       total = firstNum + secondNum;
       $('#RESULT').val(total);

    }

 

2.  html에서 onKeyup event를 통해 GetSum()함수 적용 및 숫자만 입력되도록 정규식 작성

 

 - 정규식을 사용하여 숫자만 입력가능하게 하기 : 0123456789

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

<table>
   <tr>
        <th scope="col">첫번째 값</th>        
        <th scope="col">두번째 값</th>
        <th scope="col">결과</th>
    </tr>
    <tr>
        <td><input type="text" id = "NUM1" NAME= "NUM1" value="0" ; onKeyup="this.value=this.value.replace(/[^-0-9]/g,'');GetSum();" /></td>
        <td><input type="text" id = "NUM2" NAME= "NUM2" value="0"; onKeyup="this.value=this.value.replace(/[^-0-9]/g,'');GetSum();"/></td>
        <td><input type="text" id = "RESULT" NAME = "RESULT" value="0"   onKeyup="this.value=this.value.replace(/[^-0-9]/g,'');GetSum();"></td>
    </tr>   
    
</table>

 

 

- onkeyup =>첫번째 값 이력 시 누른 키에서 손을 뗄 때 실행 결과 값에 바로 적용

- 키보드 이벤트 정리 참고: https://crivius.tistory.com/3

[HTML] onkeypress, onkeyup, onkeydown 사용법