HTML input 필드에 표기되는 숫자를 평상시에는 금액 표기법으로 콤마 ( , ) 를 추가 하도록 하고 포커싱이 되어 수정 모드가 되었을 때는 콤마( , )를 제거하여 숫자만 입력 하는 모드로 변경하는 방법에 대해 알아 보겠습니다. 



위와 같이 동작하도록 해보겠습니다. 



※ 금액 입력 시 숫자만 표기

※ 포커스가 사라지면 콤마를 추가하여 금액 표기법으로 표현


위 input 필드에 직접 숫자 입력 후 포커스를 다른 곳으로 이동 시키면 금액 표기법과 같이 세자리마다 콤마 ( , ) 찍혀 나옵니다. 




▼ HTML body 부 


1
2
3
4
5
6
7
<div style="background-color: aqua; padding: 10px;">
    <p>※ 금액 입력 시 숫자만 표기</p>
    <p>※ 포커스가 사라지면 콤마를 추가하여 금액 표기법으로 표현</p>
    <div style="margin-top: 20px; margin-right: 20px; margin-left: 20px;">
        <input id="inputPrice" type="text" 
style="text-align: right; padding-right: 10px;" value="0"> 원
    </div>
</div>
cs


input 필드 id 를 inputPrice 로 지정 했습니다. 

이 input 필드가 focus 되거나 blur 되는 순간에 콤마( , )를 추가 하거나 빼주는 작업을 합니다. 



▼ jQuery 코드 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
jQuery(document).ready(function($){    
    $('#inputPrice').on('focus'function(){
        var val = $('#inputPrice').val();
        if(!isEmpty(val)){
            val = val.replace(/,/g,'');
            $('#inputPrice').val(val);
        }
    });
    
    $('#inputPrice').on('blur'function(){
        var val = $('#inputPrice').val();
        if(!isEmpty(val) && isNumeric(val)){
            val = currencyFormatter(val);
            $('#inputPrice').val(val);
        }
    });    
});
cs



$('#inputPrice').on('focus', function(){

...

});


위 코드는 id 값이 inputPrice 인 요소가 focus 되면 어떠한 동작을 하겠다는 jQuery 코드 입니다. 


var val = $('#inputPrice').val();

inputPrice 필드의 value 값을 가져와서 val 이라는 변수에 담아 줍니다. 

이 값이 공백문자거나 null 이 아니라면 (공백문자 여부 조회 코드는 아래 첨부하는 전체 소스 참조하세요)


val = val.replace(/,/g, '');

inputPrcie 필드의 value 값에서 콤마 ( , ) 를 제거 하여 공백으로 변환합니다. 


$('#inputPrice').val(val);

콤마를 제거한 val 값을 inputPrice 의 value 값으로 지정합니다. 




이렇게 하면 input 필드가 focus 된 경우에대한 처리가 끝납니다. 





$('#inputPrice').on('blur', function(){

...

});


위 코드는 id 값이 inputPrice 인 요소가 blur (포커스를 잃은 경우) 어떠한 동작을 하겠다는 것을 정의하는 jQuery 코드 입니다. 


var val = $('#inputPrice').val();

inputPrice 필드의 value 값을 가져와서 val 이라는 변수에 담아 줍니다. 


if(!isEmpty(val) && isNumeric(val)){  ...  }

이 값이 공백문자거나 null 이 아니고 숫자라는 조건을 만족 하는 경우 


val = currencyFormatter(val);

currencyFormatter 라는 함수에 val 값을넣어 숫자를 금액 포맷으로 변경하여 리턴 합니다. 


$('#inputPrice').val(val);

금액 포맷으로 리턴된 값을 input 필드의 value 값으로 지정하여 필요한 작업을 완료 합니다. 



1
2
3
4
5
6
7
function isEmpty(value){
    if(value.length == || value == null){
        return true;
    }else {
        return false;
    }
}
cs


위 코드는 입력 받은 값의 공백문자 여부 및 null 값 여부를 체크후 boolean 값으로 리턴하는 코드입니다. 



1
2
3
4
function isNumeric(value){
    var regExp = /^[0-9]+$/g;
    return regExp.test(value);
}
cs


위 코드는 입력 받은 값을 정규표현식을 이용하여 숫자 값 여부를 체크 하여 결과를 boolean 값으로 리턴 하는 코드 입니다. 


자바스크립트에서는 test() 함수를 이용하여 정규표현식과 일치 하는 문자가 있는지 여부를 확인 및 결과를 true / false 로 리턴 합니다. 



1
2
3
function currencyFormatter(amount){
    return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
cs


입력 받은 값을 뒤에서 세자리 마다 콤마( , ) 를 추가하는 정규표현식을 활용한 코드 입니다. 

정규 표현식 관련 내용은 java 에서 다뤘으니 참조 하세요.

▶ 정규표현식 관련 포스팅 보러가기(클릭)




전체 코드 (참고하세요)


test.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<!-- <script src="jquery-3.3.1.min.js"></script> -->
<script type="text/javascript">
    
    jQuery(document).ready(function($){ 
        $('#inputPrice').on('focus'function(){
            var val = $('#inputPrice').val();
            if(!isEmpty(val)){
                val = val.replace(/,/g,'');
                $('#inputPrice').val(val);
            }
        });
        
        $('#inputPrice').on('blur'function(){
            var val = $('#inputPrice').val();
            if(!isEmpty(val) && isNumeric(val)){
                val = currencyFormatter(val);
                $('#inputPrice').val(val);
            }
        });
        
    });
    // Null check
    function isEmpty(value){
        if(value.length == || value == null){
            return true;
        }else {
            return false;
        }
    }
    // Number check with Regular expression
    function isNumeric(value){
        var regExp = /^[0-9]+$/g;
        return regExp.test(value);
    }
    // 숫자 세자리 마다 콤마를 추가하여 금액 표기 형태로 변환
    function currencyFormatter(amount){
        return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
    
</script>
    
</head>
 
<body style="padding: 20px;">
    <p>※ 금액 입력 시 숫자만 표기</p>
    <p>※ 포커스가 사라지면 콤마를 추가하여 금액 표기법으로 표현</p>
    <div style="margin: 20px;">
        <input id="inputPrice" type="text" 
style="text-align: right; padding-right: 10px;" value="0"> 원
    </div>
</body>
 
</html>
cs




 도움이 되셨다면 로그인이 필요 없는 

▼ 하트 클릭 한번 부탁 드립니다 

감사합니다 :D

블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,