input 태그 숫자만 입력

목표는 input 태그에 숫자만 입력하게 하는 것이다.

물론 기존에 다른 곳에서 이미 개발되어 있는 흔하디 흔한 기능이지.

나의 유일한 개발 스킬이 컨트롤 C 컨트롤 V 로 개발완료. 

하지만 테스트에서 난관이 시작되었다...

일단 구조를 대략적으로 보자.

<input id="p_fee_${vNum}"  name="p_fee_${vNum}"  type="text" 
    style="text-align:right; class='td_line_middle' 
    onblur="fnsetNumberFormat(this,'cont');" 

    onkeyup="fnsetNumberFormat(ts,'cont');" 
    onkeydown="javascript:if(event.keyCode ==13 || 
event.keyCode ==9){ fnsetNumberFormat(this); }
else{ onlyEditableNumber(event); };"/>

숫자가 입력되고 자동으로 합계가 계산되어야 하기 때문에

onkeydown 에서 엔터와 탭은 입력될 수 있게 하기 위함으로 if문을 써주셨다.(물론 다른 개발자가)

fnsetNumberFormat() 요 녀석이 자동으로 합계를 계산하는 녀석

onlyEditableNumber() 요놈이 이름부터 알 수 있듯이 숫자만 입력하도록 하는 놈

숫자만 입력되는 로직은 onlyEditableNumber 함수에서 키 이벤트를 통해 숫자인지 아닌지 판단한 후 숫자가 아니라면 입력됬던 키보드 이벤트 자체를 막아버리는 것이 핵심이다.

function blockKeyEvent(myEvent,isBlock){
    if(isBlock){
        if(!commonKeyEvent(myEvent)){
            if(navigator.appName != 'Netscape'){
                myEvent.returnValue=false;
            }else{
                myEvent.preventDefault();
            }
        }else{
            if(navigator.appName != 'Netscape'){
                myEvent.returnValue=true;
            }
        }
    }else{
        if(navigator.appName != 'Netscape'){
            myEvent.returnValue=true;
        }
    }
}

myEvent.preventDefault(); 

요기로 오면 키보드 입력자체를 없던 일로 만드는 것이다.(사실 잘모름)

물론 저 함수 전에 이번에 눌린 키보드 이벤트가 숫자인지 아닌지 판단 하는 함수가 선행되어야 한다.

문제는 처음화면에서는 잘동작하나 했더니 같은 화면에서 사용자 정보를 검색하는 팝업을 쓴 후에 다시 입력해보면 한글느님께서 입력이 되신다..

세종대왕님의 위대함은 프로그래밍에서도 느낄 수 있..ㅠ

조선에는 세종대왕느님이 계시다면 21세기는 구글느님이 계신다. 

구글을 탐험한 결과 위의 로직과 별개로 

아예 한글입력을 막아버리는 input 스타일이 계셨도다!!

style="ime-mode:disabled;"  <- 

요놈만 스타일에 추가하면 위의 로직으로 숫자만 입력받을 수 있게 개발 완료.

왜 안되는 것인지는 영원히 미궁속으로.. 아시는 분은 이유 좀 알려주세요..