<input type="text" id="budget" onkeyup="addComma(this.value)"  style='IME-MODE: disabled'/>

아래의 함수를 작성한 뒤 위처럼 input 태그의 onkeyup 에 추가한다.

숫자 유효값을 체크하기 위해서는 onkeydown 에 함수를 추가적으로 넣도록 한다.

아래의 함수는 먼저 문자열에서 숫자만 뽑아낸 뒤 알고리즘에 의해서

세자리마다 콤마를 찍어주는 방식으로 구현되었다.

function addComma( real ) {
    var i=0, j;
    var len, startStrLen, divideNum;
    var tmpStr, remainStr, startStr;
    var resultStr;
    var valid = "0123456789";
    var num = "";
    var idx;
   
    // 먼저 123,456,789 이런식으로 되어있는 문자열에서 숫자만 뽑아낸다.
    for(idx = 0 ; idx < real.length ; idx++)
    {
        if(valid.indexOf(real.charAt(idx)) != -1)
        {
           num += real.charAt(idx);
        }         
    }
    len = num.length;     // 입력된 숫자의 길이를 구함. 12345라면 5가 됨.
    divideNum = Math.floor(len / 3); // 가장 앞 자리를 구하기 위해 3으로 나눔.. 예를 들어 12345라면  len은 5이고 divideNum은 1
    startStrLen = len % 3;     // 컴마를 찍을 문자열을 정하기 위해 3으로 나눈 나머지를 구함. 12345라면 len은 5이고 startStrLen은 2
   
    resultStr = num.substr(0, startStrLen ); 
    // 부분 문자열을 구하는데, 위에서 구한 크기만큼 0번째부터 잘라낸다.
    // 12345라면, 0번째부터 2개인... 12가 된다.
    // 왜 이렇게 하냐하면, 3자리 단위로 컴마가 찍혀야 되기 때문에 3으로 나눠서 나머지를 시작 문자로 놓고
    // 그 다음부터 컴마를 찍으면 된다.
    // 1234567 이라면 3으로 나눈 나머지인 startStrLen은 1이 되어, resultStr은 1이 될것이다.
   
    remainStr =  num.substr(startStrLen, len - startStrLen ); 
    // 나머지 문자를 구한다. 12345인 경우 345가 된다.
   
    tmpStr = "";
   
    if ( remainStr != "" )  // 만약 입력된 문자가 1, 12, 123 같이 3글자 이하라면 이 루틴은 필요 없다.
    {
     // 나머지 문자열, (여기서는 345)에 대해서
     // 앞에 컴마를 붙히고 3글자식 잘라서 더해준다.
     // 만약 사용자 입력이 1234567 이라면 divideNum = 2 가 되고 remainStr은 234567이 되어서
     // 두번 루프가 돌면서 ,234,567 의 문자열이 만들어진다.
     for ( i = 0; i < divideNum ; i++ )
      tmpStr = tmpStr + "," + remainStr.substr(i*3, 3);
    }
   
    resultStr = resultStr + tmpStr;
   
    // 3으로 딱 나눠 떨어지는 경우는 (예를 들어 123456은 ,123,456이 되기 때문에 맨앞의 쉼표 제거)
    if ( startStrLen == 0 )
     resultStr = resultStr.substr(1, resultStr.length - 1);
   
    document.getElementById("budget").value = resultStr;
}

// addOnLoad()
function addOnload() {
 
 // 함수 유효성 검증
 if( !document.getElementsByTagName || !document.getElementById ) return false;

 // 숮자 field에 numOnly 함수를 추가한다.
 document.getElementById("budget").onkeydown = numChk;
  document.getElementById("crossRate").onkeydown = numChk;
  document.getElementById("mutationRate").onkeydown = numChk;
  document.getElementById("populationSize").onkeydown = numChk;
  document.getElementById("maxGeneration").onkeydown = numChk;
}

Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

  1. BlogIcon 날리블루스 2009.01.21 22:08 신고  댓글주소  수정/삭제  댓글쓰기

    금액의 콤마사용 때문에 여기저기 찾다가 님의 블로그를 방문하게 되었습니다. 기존에 쓰던 JS 정규식이 IE에서는 잘 되던데, 파이어폭스에서는 안되어서 마구마구 찾았습니다. 다른브라우저에서는 아직 잘 ...

    잘 쓰겠습니다!

    저는 이렇게 활용할 예정입니다~~
    <!-- HTML에서는 -->
    <input ... onkeyup="this.value = addComma(this.value);">
    <!-- // 끝 -->
    //JS에서는
    // document.getElementById("budget").value = resultStr;
    ==> return resultStr;

  2. BlogIcon 관리자 2009.01.26 12:41  댓글주소  수정/삭제  댓글쓰기

    잘 쓰세요~ 반갑습니다^^

  3. BlogIcon rolex replica 2013.01.22 16:51  댓글주소  수정/삭제  댓글쓰기

    정말 정보를 주셔서 감사합니다, 감사합니다.