인터넷 뱅킹처럼 숫자를 버튼으로 입력하는 방식 간략하게

인터넷 뱅킹 할 때 이체금액 등을 마우스로 버튼 클릭하여 입력(&추가)하는 방식이 종종 있다.

따로 웹페이지 제작하는건 귀찮아서 위대한(ㄷㄷ) jsfiddle.net 에 샘플을 만들었다.
https://jsfiddle.net/jo1dbf1h/

• jQuery 사용

<input type="text" id="val" readonly="readonly" value="0" />

<button class="add_val" data-addvalue="10000">만원</button>
<button class="add_val" data-addvalue="50000">5만원</button>

<button class="reset_val">정정</button>

$(function() {
	// stackoverflow 참고
    // http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

	$(".add_val").off("click").on("click", function(evt) {
    	var obj = $("#val");
    	var val = parseInt(obj.val().replace(/,/g,''));
        var add_val = $(this).data("addvalue");
        obj.val(numberWithCommas(val + add_val));
    });

	$(".reset_val").off("click").on("click", function(evt) {
    	$("#val").val('0');
    });
});